小试牛刀使用了一下scroll-view,示例很简单,请参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html。
注意:列表实现前面文章中已实现,本篇只特别注明修改的地方。请参考地址:https://www.jianshu.com/p/44b07a86c8ff。
区别方法:
1、小程序页面对应的.wxml文件中,添加代码:
<scroll-view scroll-y="true" style="height:{{windowHeight}}px" bindscrolltoupper="fresh" bindscrolltolower="loadmore">
<view wx:for="{{list}}" wx:key="index" data-id="{{item.id}}">
<!-- item主体代码此处省略 -->
</view>
</scroll-view>
在这里讲一个scroll-view的一些属性。
首先,scroll-y表示允许纵向滚动,且必须设置为true,默认值为false。
其次,style="height:{{windowHeight}}px",scroll-view必须设置指定高度,否则测试不会触发底部或顶部事件,这里是动态获取是页面的高度。
最后,bindscrolltoupper="fresh"滚动到顶部/左边时触发我们自己定义的fresh方法;同样,bindscrolltolower="loadmore"滚动到底部/右边时触发我们自己定义的loadmore方法。
2、在小程序页面对应的.js文件中,添加代码:
//上拉加载更多
loadmore:function(params) {
//加载更多代码主体
},
//下拉刷新
fresh:function(options) {
//下拉代码主体
},
3、经过测试发现bindscrolltoupper和bindscrolltolower触发的非常频繁,可能会重复调用方法里的代码主体。此时在小程序页面对应的.js文件中data中添加标志:
data: {
list:totalList,
windowHeight: 0,
pageNum: 1, // 设置加载的第几次,默认是第一次
pageTotalNum:2, // 设置总共的分页数
freshing:false, // 是否刷新中
loading:false, // 是否正在加载更多
},
freshing表示是否下拉刷新中,当为true的时候,再过来的触发事件,不予处理;loading上拉加载同理。
4、在第2步的两个方法中分别加入判断,如下:
fresh方法:
if(this.data.freshing === true){
console.info("fresh return")
return;
}
this.data.freshing = true;
//代码主体
this.setData({
list:totalList,
pageNum:1,
freshing:false //在数据请求结果设置为false,下一步请求就能进来了
})
//代码主体结束
loadmore方法同理:
if(this.data.loading === true){
console.info("loading return")
return;
}
this.data.loading = true;
this.data.pageNum += 1;
if(this.data.pageNum > this.data.pageTotalNum){
wx.showToast({
title: '没有数据了',
}),
this.data.loading = false //没有下一页,不用请求了,同样设置加载中标志值为false
return
}
//代码主体
this.setData({
list:totalList,
pageNum:1,
loading:false //在数据请求结果设置为false,下一步请求就能进来了
})
//代码主体结束
此项目针对scroll-view下拉和上拉及相关属性的操作,随笔记录,不喜勿喷。