小程序随笔11:scrollview实现列表

小试牛刀使用了一下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下拉和上拉及相关属性的操作，随笔记录，不喜勿喷。