初识小程序

分页加载数据

2020-10-12  本文已影响0人  洗耳恭听_kai

引言:页面上拉加载数据,主要是获取到页面的高度,然后传递页码,再在前端拼接数据

<view class='list' style="height:{{winHeight-29}}px">
        <scroll-view scroll-y="{{true}}" bindscrolltolower="loadmore" enable-back-to-top="{{true}}" style="height: 100%;" lower_threshold="200">
          <block wx:for="{{list}}" wx:key>
            <view class='item acea-row row-between-wrapper'>
                <view class="picTxt acea-row row-between-wrapper">
                    <view class='pictrue'><image src='{{item.userinfo.userimg}}'></image></view>
                    <view class='text'>
                        <view class='name line1'>{{item.userinfo.username}}</view>
                        <view>建立时间: {{item.addtime}}</view>
                    </view>
                </view>
            </view>
          </block>
        </scroll-view>
    </view>
data: {
    page: 0,
    list: [],
    count: 0,
    winWidth: 0,
    winHeight: 0,
  },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
    that.init()
  },
init: function(){
    var that = this
    that.getlist()
  },

  getlist: function(){
    var that = this
    app.reqPost("Share", "getshareuserlist", {
      page: that.data.page,
      PHPSESSID: wx.getStorageSync('PHPSESSID')
    }, function (res) {
      console.log(res.data)
      that.setData({
        count: res.data.data.count,
        list: that.data.list.concat(res.data.data.list)  //拼接数据
      })
    })
  },
  loadmore: function () {
    this.data.page++;
    this.getlist()
  },
上一篇 下一篇

猜你喜欢

热点阅读