WeChat 애플릿은 지연 로딩 및 데이터 추가 방법을 구현합니다.

비즈니스를 하다 보면 많은 사진이나 데이터가 포함된 목록을 자주 접하게 되는데, 한번에 렌더링하면 렌더링 시간이 너무 길거나 바로 흰색 화면에 부딪혀 아무것도 렌더링되지 않을 수 있습니다. 로딩(입안의 데이터 보기만 렌더링)이 매우 필요하며 매번 특정 수의 조각을 추가합니다.

아이디어:
페이지 초기화에 들어가 먼저 처음 10개의 voteList 배열을 로드합니다(숫자는 실제 필요에 따라 다름). 그런 다음 사용자가 맨 아래로 풀다운할 때마다 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
      })
    }
  }

})