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

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

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


相关文章
|
1月前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
1月前
|
缓存 小程序 UED
微信小程序如何在切换页面后原页面状态不变
微信小程序如何在切换页面后原页面状态不变
111 0
|
1月前
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
61 0
|
1月前
|
XML 小程序 JavaScript
小程序页面传值
本文介绍了微信小程序中父子页面的传值方法。父页面向子页面传值可通过绑定事件跳转,使用`data-`属性传递参数,然后在子页面的`onLoad`中接收。子页面向父页面传值则通过用户选择内容后调用父页面的方法,利用`getCurrentPages()`获取父页面实例,进而修改父页面的数据。
26 2
|
1月前
|
小程序 JavaScript 数据库
小程序登录页面
该文介绍了使用小程序云开发实现登录和注册的步骤,包括界面设计和后端逻辑。界面使用了`wxss`和`wxml`编写,样式精致,包含手机号和密码输入、登录按钮、注册和忘记密码选项。在`js`中,重点处理了用户输入的账号和密码,通过云数据库查询验证用户是否存在,使用标志位`flag`判断,若账号或密码错误,显示相应提示。文章总结了利用for循环比对数据库账号的难点,并表达了作者的学习心得。
31 1
|
1月前
|
新零售 小程序 搜索推荐
认养模式小程序系统开发|成熟技术|项目案例
随着新零售的发展,我们设想更多创新的商业模式和营销方式。
|
1月前
|
小程序
小程序和页面生命周期详解
小程序和页面生命周期详解
24 0
|
1月前
|
存储 缓存 小程序
微信小程序页面传值的几种方式
微信小程序页面传值的几种方式
|
1月前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
30 0
|
1月前
|
缓存 小程序 开发者
微信小程序如何刷新当前页面
微信小程序如何刷新当前页面
129 0