入门——北榛本地宝(列表)"/>
微信小程序快速入门——北榛本地宝(列表)
一、导航跳转及页面传参
1.新增shoplist页面
2.首页跳转以及传参
二、设置标题以及编译模式
1.挂载上一个页面传过来的参数
2.在onReady函数中设置标题
3.自定义编译模式
三、渲染商铺列表
1.挂载请求参数
2.调用api接口
3.渲染门店页面
4.美化门店页面
/* pages/shoplist/shoplist.wxss */
.shop-item {display: flex;padding: 15rpx;border: 1rpx solid #efefef;border-radius: 8rpx;margin: 15rpx;box-shadow: 1rpx 1rpx 15rpx #ddd;
}.thumb image {width: 250rpx;height: 250rpx;display: block;margin-right: 15rpx;
}.info {display: flex;flex-direction: column;justify-content: space-around;font-size: 24rpx;
}.shop-title {font-weight: bold;
}
四、实现上拉刷新效果
1.实现loading消息提示
展示
隐藏
效果如下
2.配置上拉触底值
当前页数+1、调用api接口
3.配置节流阀
打开
关闭
调用api接口中直接退出
4.判断api数据是否加载完毕
效果如下
五、实现下拉刷新效果
1.开启下拉刷新并美化动画
2.重置数据、重新发起数据请求
3.使用回调函数关闭下拉刷新窗口
传参cb
判断cb
六、使用wxs处理手机号
1.新建tools.wxs
2.编写处理手机号的方法
3.在页面引入并处理手机号
最终页面效果如下
更多推荐
微信小程序快速入门——北榛本地宝(列表)
发布评论