• 首頁 > 上網技巧 > 電腦小技巧 > 微信小程序分頁列表setData數據過大問題

    微信小程序分頁列表setData數據過大問題

    時間:2019-08-22 17:49 作者:QQ地帶 我要評論

    解決方法-分頁渲染數據
     
    //index.js
    Page({
      data: {
        list: [],
        page: 1,
        pageNumber: 10
      },
      onLoad: function() {
        this.loadData();
      },
     
      loadData() {
        let data = [];
        for (let i = 0; i < this.data.pageNumber; i++) {
          data.push(1 + i + (this.data.page - 1) * this.data.pageNumber)
        }
        if (this.data.page == 1) {
          this.setData({
            list: []
          })
        }
        this.setData({
          [`list[${this.data.page-1}]`]: data//分頁渲染數據
        })
        wx.stopPullDownRefresh()
        wx.hideLoading()
      },
     
      onPullDownRefresh() {
        this.setData({
          page: 1
        })
        setTimeout(()=>{
          this.loadData();
        },1000)
      },
     
      onReachBottom() {
        this.setData({
          page: ++this.data.page
        })
        wx.showLoading()
        setTimeout(() => {
          this.loadData();
        }, 1000)
      }
    })
     
    <!--index.wxml-->
    <view class="list-box">
      <view class="list-page" wx:for="{{list}}" wx:for-item="pitem" wx:for-index="pindex" wx:key="{{pindex}}">
        <view class="list-item" wx:for="{{pitem}}" wx:key="{{index}}">{{item}}</view>
      </view>
    </view>
     
    /* index.wxss */
    .list-item{
      height: 200rpx;
      background: #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #fff;
    }
     

    標簽: 微信小程序
    頂一下
    (0)
    0%
    踩一下
    (0)
    0%

    Google提供的廣告

    pk10最牛稳赚计划软件
  • 2020娱乐平台招商部 七星彩综合版 pc蛋蛋拉人 注册就送19元 蚪蚪娱乐 天津快乐十分开奖助手 百家乐赢输 天津快乐10分基本走试图 恒发彩票黑平台 2019海南环岛赛分组 分分彩logo 真人麻将 彩票新浪 青海快三开奖号码 手游梭哈下载