【小程序】案例 - 本地生活(列表页面)

简介: 【小程序】案例 - 本地生活(列表页面)

1. 演示页面效果以及主要功能


6033d5b5fe7e4b948bf1be1fccc0ccda.png

页面导航并传参

上拉触底时加载下一页数据

下拉刷新列表数据

2. 列表页面的 API 接口

以分页的形式,加载指定分类下商铺列表的数据:


接口地址


https://www.escook.cn/categories/:cate_id/shops


URL 地址中的 :cate_id 是动态参数,表示分类的 Id


请求方式


GET 请求


请求参数


_page 表示请求第几页的数据


_limit 表示每页请求几条数据


3. 判断是否还有下一页数据


如果下面的公式成立,则证明没有下一页数据了:


页码值 * 每页显示多少条数据 >= 总数据条数


page * pageSize >= total


案例1:总共有 77 条数据,如果每页显示 10 条数据,则总共分为 8 页,其中第 8 页只有 7 条数据


page(7)* pageSize(10) >= total(77)


page(8)* pageSize(10) >= total(77)


案例2:总共有 80 条数据,如果每页显示 10 条数据,则总共分为 8 页,其中第 8 页面有 10 条数据


page(7)* pageSize(10) >= total(80)


page(8)* pageSize(10) >= total(80)


总结


能够知道如何实现页面之间的导航跳转


声明式导航、编程式导航


能够知道如何实现下拉刷新效果


enablePullDownRefresh、onPullDownRefresh


能够知道如何实现上拉加载更多效果 onReachBottomDistance、onReachBottom


能够知道小程序中常用的生命周期函数 应用生命周期函数:


onLaunch, onShow, onHide


页面生命周期函数:


onLoad, onShow, onReady, onHide, onUnload


相关文章
|
13天前
|
开发框架 小程序 测试技术
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统,为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化,确保稳定运行和良好体验。最后,通过提交审核、上线运营和推广策略,吸引更多用户和商家入驻。
|
1月前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
|
29天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
46 1
|
2月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
1月前
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
45 0
微信小程序 案例二 飞机大战
|
30天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
2月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
1月前
|
人工智能 小程序 Python
Python编程小案例——编一个事件提醒弹窗小程序
Python编程小案例——编一个事件提醒弹窗小程序
|
2月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。