小程序实现下拉刷新、上拉加载，代码可直接复用，拿走不谢

序言：在小程序中下拉刷新和上拉加载都是用途非常广泛的两个功能，今天咱们来实际学习一下，代码可直接复用，赶紧点赞收藏吧。

效果图：

代码：

wxml

  
    
      
      
    
    搜索
  
  
  
    
      
        
        
          {{item['name']}}
          
            
            {{item['mobile']}}
          
          
            
            {{item['address']}}
          
        
        
          
          到这去
        
      
    
    
    暂无数据
  

json

{
  "navigationBarTitleText": "授权门店",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

js

// pages/store/store.js
var api = require('../../utils/api.js');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    list:[],
    page:1,
    limit:10,
    is_end:false,
    loadingHidden:false,
    keywords:'',
    noproject:false,
    // latitude: 23.099994,
    // longitude: 113.324520,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData({
      list:[],
      page:1,
    })
    var page = that.data.page;
    var limit = that.data.limit;
    api.post({
      url: '/api/store/index',
      data: {
        page:page,
        limit:limit
      },
      success: function(data){
        wx.stopPullDownRefresh({
          complete(res) {
            wx.hideLoading();
          }
        })
        wx.setStorageSync('cur_page', 1);
        var list = that.data.list;
        for (var i = 0; i < data.list.length; i++) {
          list.push(data.list[i]);
        }
        if(wx.getStorageSync('cur_page')==1 && list.length == 0){
          that.setData({
            noproject:true
          })
        }
        that.setData({
          list: list,
          loadingHidden:true
        })
      }
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showLoading({
      title: '加载中',
    });
    this.onLoad();
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('触底');
    var that = this;
    if(that.data.is_end){
      wx.showToast({
        title: '已到底部',
        icon: 'none'
      })
      return false;
    }
    wx.showLoading({
      title: '加载中…',
    })
    var page = that.data.page;
    var limit = that.data.limit;
    page = page + 1;
    var cur_page = wx.getStorageSync("cur_page");
    if(page!=cur_page && parseInt(cur_page)+1==page){
      wx.setStorageSync('cur_page', page);
    }else{
      return false;
    }
    api.post({
      url: '/api/store/index',
      data: {
        page:page,
        limit:limit
      },
      success: function(data){
        var list = that.data.list;
        for (var i = 0; i < data.list.length; i++) {
          list.push(data.list[i]);
        }
        that.setData({
          list: list,
          page:page,
        })
        wx.hideLoading()
        if(data.list<10){
          wx.showToast({
            title: '已到底部',
            icon: 'none'
          })
          that.setData({
            is_end:true
          })
          return false;
        }
        
      }
    });
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

我是小程序软件开发，每天分享开发过程中遇到的知识点微信小程序一直加载中?，如果对你有帮助的话微信小程序一直加载中?，帮忙点个赞再走呗，非常感谢。