微信小程序 下拉刷新、上拉加载demo

原生微信小程序 下拉刷新、上拉加载demo代码
一、item-list.wxml

<!--pages/item-list/item-list.wxml-->
<view class="itemList">
    <view class="item" wx:for="{{itemList}}"  wx:key="{{item.id}}">
        <view class="name">{{item.id}}{{item.name}}</view>
        <view class="time">{{item.time}}</view>
    </view>
    <view class="tips">
        <view wx:if="{{hasMore}}">
            <view class="tips-text">加载更多</view>
        </view>
        <view wx:else>
            <view class="tips-text" wx:if="{{currentPage == 1 && itemList.length ==0}}">暂无信息</view>
            <view class="tips-text" wx:else>已经是最后一条啦</view>
        </view>
    </view>
</view>

二、item-list.js代码

// pages/item-list/item-list.js
var app = getApp()
var api = require('../../utils/httputil.js') //相对路径
Page({

  /**
   * 页面的初始数据
   */
  data: {
    itemList:[],
    currentPage:1,//当前页
    pageSize:10,//一页显示个数
    hasMore:false,
    downFlag:false,//下拉标识

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  this.getItemListByPage(this.data.currentPage,this.data.pageSize)
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   * 下拉刷新
   */
  onPullDownRefresh: function () {
    this.data.downFlag = true
    //在标题栏中显示加载
    wx.showNavigationBarLoading()
    this.data.currentPage = 1
    this.getItemListByPage(this.data.currentPage,this.data.pageSize)
  },

  /**
   * 页面上拉触底事件的处理函数
   * 拉加载
   */
  onReachBottom: function () {
    if(this.data.hasMore){
      this.getItemListByPage(this.data.currentPage,this.data.pageSize)
    }
  },
  //分页获取列表数据
  getItemListByPage(currentPage,pageSize){
    //请求服务器后台API
    api.getItemListByPage(currentPage,pageSize).then(res => {
      if(res.returnCode == 200){

        if(currentPage == 1){
          this.data.itemList=[]
        }  
        if(res.data.rows.length>0){
          if(parseInt(currentPage)<parseInt(res.data.pages)){
            this.data.hasMore =true //赋值未渲染  this.data.params=xx
            this.data.currentPage = parseInt(currentPage) +1
          }else{
            this.data.hasMore =false
          }
          //遍历
          for(var i=0;i<res.data.rows.length;i++){
          
            let obj = res.data.rows[i]
            let name = '第'+currentPage+'页'+i

            obj.name = name;

            this.data.itemList.push(obj)
          }
        }
        //渲染  this.setData
        this.setData({
          hasMore:this.data.hasMore,
          currentPage:this.data.currentPage,
          itemList:this.data.itemList
        })
        if(this.data.downFlag){
          this.data.downFlag = false
          //处理完成后，终止下拉刷新
          wx.stopPullDownRefresh()
          //完成 停止加载
          wx.hideNavigationBarLoading()
        }
      }
    })
  }

})

三、item-list.wxss

/* pages/item-list/item-list.wxss */
.itemList{
    width:100%;
    background: #f7f7f7;
}
.item{
    width:100%;
    background-color: #ffffff;
    margin-top: 20rpx;
    height: 120rpx;
    padding-left:20rpx;
}
.name{
    display: flex;
    flex-direction: row;
    font-size: 28rpx;
    font-weight: 400;
    color:#000000;
    padding-top:10rpx;
}
/*时间*/
.time{
    font-size: 28rpx;
    font-weight: 400;
    color:#555555;
    margin-top: 20rpx;
}
.tips{
    width:100%;
    margin-top: 60rpx;
}
.tips-text{
    font-size: 28rpx;
    text-align: center;
    color:#cacaca;
}

四、item-list.json

{
  "navigationBarTitleText":"分页 下拉刷新 上拉加载",
  "enablePullDownRefresh":true,
  "backgroundTextStyle":"dark",
  "usingComponents": {}
}

api.getItemListByPage方法请求 我自己本地服务器后台API方法，返回分页结果数据。想要看效果的话，可替换成自己的方法，进行校验。