小程序的上拉加载 与 下拉刷新

方案1: 利用小程序onReachBottom 和 onPullDownRefresh

(适用于整页的数据展示)

步骤1:获取列表数据

const app = getApp()
data: {
    pageSize: 30,
    pagination: 1,
    list: []
},
getData(){
    // loading 变成 true
    this.setData({
        loading: true
    })
    let data = {
        pageSize: this.data.pageSize,
        pagination: this.data.pagination
    }
    app.Request("get",`/api/getlist`,data,"加载中")
    .then( res => {
      console.log(res.data)
      
      let list = [...this.data.list,...res.data]
      this.setData({
        list: list
      })
      if(res.data.length==0){
        this.setData({
            noMore: true
        })
      }
      
      wx.stopPullDownRefresh()
    })
    .catch( (err) => {
      console.log(err)
    })
},

步骤2:布局

<view class="container">
   <view class="list_box">
   	<block wx:for="{{list}}" wx:key="id">
           <view class="list_item">
               <view class="item_pics">
                   <image class="item_pics_img" src="{{item.picUrl}}" mode="aspectFit"></image>
               </view>
               <view class="item_con">
                   <view class="item_user">
                       <image class="item_avatar" src="{{item.user.avatar_url}}"></image>
                       <text>{{item.user.nickname}}</text>
                   </view>
                   <view class="item_time">{{item.cn_created_at}}</view>
               </view>
           </view>
   	</block>
   </view>
</view>

上拉加载更多

/**
  * 页面上拉触底事件的处理函数
  */
onReachBottom: function () {
   let pagination = this.data.pagination
   this.setData({
     pagination:pagination+1
   })
   this.getData()
},

下拉刷新

/**
  * 页面相关事件处理函数--监听用户下拉动作
  */
onPullDownRefresh: function () {
   this.setData({
     pageSize: this.data.pageSize,
     pagination: 1,
     list: []
   })
   this.getData(true)
},

方案2: 利用小程序 scroll-view

1. 可以一个区域内滚动 加载
2. scroll-view 固定一个包含列表数据的view高度，让它里面列表的数据溢出可以滚动
3. 绑定事件 bindscrolltoupper 滚动到顶部/左边时触发
4. 绑定事件 bindscrolltolower 滚动到底部/右边时触发

<scroll-view 
    scroll-top="0" 
    scroll-y="true" 
    style="height:calc(100vh - 200rpx)" 
    bindscrolltolower="scrollToLower" 
    bindscrolltoupper="scrollToUpper"
  >
    <block wx:for="{{list}}" wx:key="id">
        <view class="list_item">
        ...
        </view>
    </block>
    <view class="list-tips">
        <view wx:if="{{loading}}">数据加载中...</view>
        <view wx:if="{{noMore}}">没有更多数据了</view>
        <view wx:if="{{loadingFailed}}">数据加载失败,请重试</view>
    </view>
      
  </scroll-view>

完整代码

data: {
    pageSize: 10,
    pagination: 1,
    list : [],
    loadingFailed:false,
    loading:false,
    noMore: false
},
getData(){
    let data = {
      pageSize: this.data.pageSize,
      pagination: this.data.pagination,
      city: ''
    }
    this.setData({
      loading: true
    })
    app.UTIL.Request("get",`/api/list`,data,"加载中")
    .then( res => {
      this.handledata(res)
    })
    .catch( (err) => {
      this.setData({
        loadingFailed: true
      })
    })
  },
  handledata(data){
    let newList = data.data
    if(newList.length==0){
      this.setData({
        noMore: true
      })
    }
    
    let list = [...this.data.list,...newList]
    
    this.setData({
      list: list,
      loading: false
    })

},
// 滑到上方 从新加载
scrollToUpper(e){
    this.init()
    this.getData()
},
  
//  加载下一页
scrollToLower(e){
    if(this.data.loading || this.data.noMore) return
    this.setData({
      pagination: this.data.pagination + 1
    })
    this.getData()
},