微信小程序列表懒加载

1. 基于wepy的项目需要实现小程序的列表懒加载
2. 没找到合适的微信小程序懒加载插件,找的资料基本都是图片懒加载,于是自己实现
3. 小程序API档:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
4. 主要基于onReachBottom和onPullDownRefresh两个API,使用前请认真阅读文档
5. wepy中动态传参需要用到.sync修饰符
6. 未做防抖处理

一、子组件

<template>
  <view class="ChildComponents " @tap="enterDetails">
  	{{itemData.title}}
  	{{itemData.content}}
  </view>
</template>

<script>
  import wepy from 'wepy';

  export default class ChildComponents extends wepy.component {
    props = {
      itemData: {
        type: Object,
        default: {
          id: '',
          title: '标题',
          content:'内容',
        }
      },
    };

    methods = {
    	//点击跳转到某个小程序页面
      enterDetails() {
        let id=this.itemData.id*1;
        if (!isNaN(id) && typeof id === 'number') {
          wx.navigateTo({
            url: 'miniProPage?id=' + id
          });
        }
      }
    };
  }
</script>

二、父组件

<template>
	 <view class="gameList_emBox">
          <repeat for="{{itemArray}}" item="item">
            <ChildComponents class="GameListItem" :itemData.sync="item"></ChildComponents >
          </repeat>

          <view class='loadmore' hidden='{{isShowLoadmore}}'>
            <view class='loading'></view>
            <view class='loadmore_tips'>正在加载</view>
          </view>
          <view class="loadmore loadmore_line" hidden='{{!isShowNoDatasTips}}'>
            <view class="loadmore_tips">我可是有底线哒！</view>
          </view>
        </view>
</template>

<script>
  import wepy from 'wepy';
  import ChildComponents from '../../components/ChildComponents ';

  export default class  parentComponent extends wepy.page {
    config = {
      navigationBarTitleText: '列表页面',
      'enablePullDownRefresh': true,
    };
    components = { ChildComponents };

    data = {
      globalData: {},
      page: 1,
      num_pages:1,
      page_size: 10, //每页加载数量
      isShowLoadmore: true, //正在加载
      isShowNoDatasTips: true, //暂无数据
      endloading: false,    //判断是否还有数据
      itemArray: [],//列表数组
    };

    // 列表分页加载
    reviewpage(e) {
      let _this = this;
      // let id = this.id;
      let page = this.page;
      wx.request({
        url: this.globalData.baseUrl.reqUrl + '/xx/xx/xx/',
        method: 'GET',
        data: {
          // id: id, 
          page: _this.page
        },
        success(res) {
             _this.num_pages=res.data.num_pages;
            if(res.data.num_pages+1== _this.page ){
              _this.isShowLoadmore = true;//隐藏正在加载
              _this.isShowNoDatasTips = true;//显示暂无数据
              _this.endloading = true;//上拉不在加载
            }
            else{
              let datas = res.data.data;
              _this.itemArray = _this.itemArray.concat(datas);
              if (datas.length < _this.page_size) { //如果剩下评论数 小于10表示数据加载完了
                _this.isShowLoadmore = false;//隐藏正在加载
                _this.isShowNoDatasTips = false;//显示暂无数据
              }
              _this.page += 1;
            }
            _this.$apply();
        }
      });
    };

    //用户上拉时,如果还有数据,就调用分页加载
    onReachBottom() {
      if (!this.data.endloading) {
        this.reviewpage();
      }
    };

    //下拉刷新
    onPullDownRefresh() {
      this.getData();
    };
		
    //更新第一页的数据
    getData() {
       let _this = this;
      _this.page=1;
      wx.request({
        url: this.globalData.baseUrl.reqUrl + '/xx/xx/xx/',
        data: {
          page:_this.page,
        },
        success(res) {
           _this.num_pages=res.data.num_pages;
	   		_this.page+=1;
	    	_this.endloading = false;
	     	_this.itemArray = res.data.data;
	     	_this.$apply();
        },
        fail() {}
      });
    };
    onShow(){
    	//为了返回此页面时也一次刷新列表
      this.getData();
    };
    onLoad() {
    	//获得全局变量
   	this.globalData = wepy.$instance.globalData;
		//this.getData();写在这里,返回此页面时,不会调用getData
	}

  }
</script>

再次强调未做防抖处理,就是网速过慢时多次下拉,导致多次请求同一页的数据的问题