微信小程序 下拉刷新、上拉加载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方法，返回分页结果数据。想要看效果的话，可替换成自己的方法，进行校验。