业务中我们常会遇到图片较多、或者数据较多的列表，一次渲染出来的话轻则渲染时间过长，重则可能直接罢工白屏，什么都渲染不出来，这个时候懒加载(只渲染视口中的数据)就很有必要了，然后每次再追加一定的条数。
思路：
进入页面初始化，首先 voteList 数组加载前10条（数量根据实际需要），然后每当用户下拉到底部后，触发onReachBottom函数，追加后10条到 voteList 数组中，循环直到全部加载完毕，显示“全部加载完毕”等提示语，此时无法下拉。
代码：
wxml：
<view class="vote_list flex-row"> <view class="item" wx:for="{{voteList}}" wx:key="{{item.contentId}}"> <view class="image" bindtap="popupVideo" data-item="{{item}}" > <image class="img" mode="widthFix" src="{{item.contentpic50}}"></image> <image class="play_icon" src="../../images/video-icon.png"></image> </view> <view class="title" bindtap="popupVideo" data-item="{{item}}"><text>{{item.contentname}}</text></view> <view class="author">{{item.authorName}}</view> </view> </view>
js：
var api = require(\'../../api.js\'); var MD5 = require(\'../../utils/MD5.js\'); var app = getApp(); Page({ /** * 页面的初始数据 */ data: { Phone: \'\', token: \'\', voteList: [], allList: [], currentNo: 10 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var Phone = wx.getStorageSync(\'Phone\') this.setData({ Phone: Phone }) this.getList() }, // 列表 getList() { var that = this wx.request({ url: api.wx.getVoteList method: \'get\', data: app.getNewMD5({ t: that.data.token }), success: function (res) { // console.log(res.data.data.content) if (res.data.code == \'200\') { var totalList = res.data.data.content var initList = [] for (var i = 0; i < 10; i++) { initList.push(totalList[i]) } that.setData({ voteList: initList, allList: res.data.data.content }) console.log(that.data.voteList) } } }) }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { var allList = this.data.allList var currentNo = this.data.currentNo var initList = [] console.log(currentNo, allList.length) // 剩余条数 var surplus = allList.length - currentNo if (surplus >= 10) { for (var i = 0; i < currentNo + 10; i++) { initList.push(allList[i]) } console.log(\'initList\', initList) this.setData({ currentNo: currentNo + 10, voteList: initList }) } else { for (var i = 0; i < currentNo + surplus; i++) { initList.push(allList[i]) } console.log(\'initList\', initList) this.setData({ currentNo: currentNo + surplus, voteList: initList }) } } })
