1.展示Loading效果和隐藏Loading效果:
![](https://img-blog.csdnimg.cn/img_convert/249bc338f20d8e49dee2ca6ff00bab24.png)
2.实现上拉加载
第一步:在shoplist.json文件配置上拉触底的距离
![](https://img-blog.csdnimg.cn/img_convert/ea1a46495d1539c58e08619db5dc18be.png)
第二步:在上拉触底事件的处理函数中更新数据
![](https://img-blog.csdnimg.cn/img_convert/cf7a4577c8a1f1571aee61f5ab65994f.png)
第三步:当多次请求数据时,定义节流阀
a.先在data中定义节流阀
isloading:false //节流阀
b.开始请求时开启节流阀
![](https://img-blog.csdnimg.cn/img_convert/128544d868fe4be7e6764f6d211a4cbf.png)
c.请求成功后关闭节流阀
![](https://img-blog.csdnimg.cn/img_convert/c25c75031747281419e4205c271a30ef.png)
d.判断当前有没有在请求其它数据
![](https://img-blog.csdnimg.cn/img_convert/8f42844fe96dd79369e9172bfa377eca.png)
第四步:判断是否还有下一页数据
![](https://img-blog.csdnimg.cn/img_convert/0cf9846114b5da3d24b78f059d384e73.png)
![](https://img-blog.csdnimg.cn/img_convert/c8b80d046a2ad8b3ae062c4d7f9b2e42.png)
3.实现下拉刷新
第一步:开启下拉刷新,设置下拉背景样式
![](https://img-blog.csdnimg.cn/img_convert/95eeda5ae47494bfee966ebb320c9889.png)
第二步:关闭下拉刷新效果
![](https://img-blog.csdnimg.cn/img_convert/f1e9fec3b05eb5391dccce3b23b46715.png)
关闭下拉刷新样式只在下拉刷新时需要,所以wx.stopPullDownRefresh()应该按需调用,由于wx.stopPullDownRefresh()是在getShopList()函数中调用的,可传cb回调来实现按需调用
![](https://img-blog.csdnimg.cn/img_convert/aafff919601eeffd60bed7ab97bd8514.png)
![](https://img-blog.csdnimg.cn/img_convert/3194f3d65917402c5f9cf8c662788cfb.png)
![](https://img-blog.csdnimg.cn/img_convert/defa6913b32825085e59658d804768ed.png)
4.使用wxs分割手机号
第一步:在utils文件夹下创建文件tools.wxs
![](https://img-blog.csdnimg.cn/img_convert/8523d413dec75332b51793b4d15e0aea.png)
第二步:在需要使用的地方引入
![](https://img-blog.csdnimg.cn/img_convert/b48640bec71093a429344978c7038db1.png)