微信小程序自带了下拉刷新,上拉加载的控件
用法:在需要下拉page页面中的 .json 文件中打开控件配置: "enablePullDownRefresh": true 这里需要注意; true 为 Bool ,而不是 “true” 字符串; "backgroundTextStyle": "dark",(控制下拉时三个点点的颜色模式,)
、、、
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",
.json文件配置
配置完上面的两行代码后页面就可以进行刷新了;接下来就需要在 .js 文件中写下拉的回调了(onPullDownRefresh: function ());
、、、
//下拉刷新
onPullDownRefresh: function () {
//展示加载动画
wx.showNavigationBarLoading()
this.data.pageNumber = 1;
this.getData()
//设置延时停止动画
setTimeout(() => {
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh()
}, 1500);
},
上拉加载更多的功能,配置完上面的代码后,直接在 js 文件中写上上拉的回调的方法即可:
、、、
//上拉加载
onReachBottom: function () {
this.data.pageNumber++;
this.getData()
},
如果回调可以正常的走,那么恭喜你已经完成下拉功能的编写,可以关闭这篇文章了,如果发现回调不走的,可以接着看。
如果下拉的回调没走,首先检查下 .json 中的设置代码格式是否正确,区分好 true 和 "true"; 若没有问题,那就是在文件创建的时候,系统已经默认生成了回调,然后你又重新写了回调(现在 .js 文件中会有两个回调方法),所以导致你写的回调并没有被执行;在 js 文件中全局搜索下回调方法(onPullDownRefresh),删除多余的函数即可
系统生成的回调方法
网友评论