小程序之实现滚动加载

2019独角兽企业重金招聘Python工程师标准>>>

完整代码，片段来自码云 wallpaper 项目

<template>
  <view class="all">
    <view class="title-wire"></view>
    <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>
      <view class="all-cont">
        <view class="all-list"
        wx:for="{{getAllList}}"
        wx:key="{{index}}">
          <view class="all-list-cont">
            <view class="all-list-text">{{item.text}}</view>
            <image src="{{item.imgUrl}}"/>
          </view>
        </view>
      </view>
      <view class="all-nothave" wx:if="{{isGetAllList}}">没有更多了</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  config: {
    navigationBarTitleText: "商品分类",
    disableScroll: true,
    backgroundColor: "#fff"
  },
  data: {
    // 列表
    height: '',
    allList: [
      {
        text: '1',
        imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'
      },
      {
        text: '2',
        imgUrl: 'http://ipyd.paixian.com/wall/banner1.png'
      },
      {
        text: '3',
        imgUrl: 'http://ipyd.paixian.com/wall/banner3.png'
      },
      {
        text: '4',
        imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'
      },
      {
        text: '5',
        imgUrl: 'http://ipyd.paixian.com/wall/banner1.png'
      },
      {
        text: '6',
        imgUrl: 'http://ipyd.paixian.com/wall/banner3.png'
      },
      {
        text: '7',
        imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'
      },
      {
        text: '8',
        imgUrl: 'http://ipyd.paixian.com/wall/banner1.png'
      },
      {
        text: '9',
        imgUrl: 'http://ipyd.paixian.com/wall/banner3.png'
      },
      {
        text: '10',
        imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'
      },
      {
        text: '11',
        imgUrl: 'http://ipyd.paixian.com/wall/banner1.png'
      },
      {
        text: '12',
        imgUrl: 'http://ipyd.paixian.com/wall/banner3.png'
      },
      {
        text: '13',
        imgUrl: 'http://ipyd.paixian.com/wall/banner2.png'
      }
    ],
    getAllList: [], // 模拟数据滚动加载,
    pageSize: 10, // 每页条数
    pageNo: 1, // 当前页数
    isGetAllList: false, // 是否显示没有更多了
  },
  lower() {
    // 因为是模拟数据返回的是全部，这里所以要做成分页的形式，如果是通过页数去请求接口再push就不需要这样子操作了
    if(this.data.getAllList.length < this.data.allList.length){
      wx.showLoading({  
        title: '加载中',
        icon: 'loading',
      })
    } else {
      this.setData({
        isGetAllList: true
      })
    }
    for (let i = 0; i < this.data.pageSize; i++) {
      let getAllListLength = this.data.getAllList.length
      if(this.data.getAllList.length < this.data.allList.length){
        this.data.getAllList.push(this.data.allList[getAllListLength++]);
      }
    }
    setTimeout(() => {
      this.setData({
        getAllList: this.data.getAllList
      });
      wx.hideLoading();
    }, 500)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let _this = this
    wx.getSystemInfo({
      success: (res) => {
        let result = _this.data.allList;
        for (let i = 0; i < _this.data.pageSize; i++) {
          if(_this.data.getAllList.length < _this.data.allList.length){
            _this.data.getAllList.push(result[i])
          }
        }
        _this.setData({
          height: res.windowHeight,
          getAllList: _this.data.getAllList
        })
        // 判断展示没有更多了
        if(_this.data.getAllList.length >= _this.data.allList.length) {
          _this.setData({
            isGetAllList: true
          })
          return false
        }
      }
    })
  }
};
</script>

<style lang="less">
.title-wire{
  width: 100%;
  height: 1px;
  .mix-1px(0, 0, 1, 0, #ccc);
  position: fixed;
  z-index: 999;
}
.all {
  background: #fff;
  // 列表
  .all-cont{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px 0 10px 20px;
      box-sizing: border-box;
  }
  .all-list{
    width: 50%;
    .all-list-cont{
      box-shadow: 0px 2px 4px 0px rgba(215,215,215,0.5);
      margin-right: 20px;
      margin-bottom: 20px;
      height: 120px;
      position: relative;
      overflow: hidden;
      border-radius: 2px;
    }
    .all-list-text{
      position: absolute;
      background: rgba(20, 20, 20, 0.1);
      z-index: 99;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: auto;
      color: #fff;
    }
  }
  .all-nothave{
    width: 100%;
    text-align: center;
    color:#7c7c7c;
    padding-bottom: 20px;
  }
}
</style>

 

转载于:https://my.oschina.net/lemonfive/blog/1818668