微信小程序下拉上拉分页功能实现

js

//index.js
const config = require('../../utils/config.js')
//获取应用实例
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    pageNum:1,
    pageSize:30,
    hasMoreData: true,
    contentlist: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var userInfo = wx.getStorageSync(config.USERINFO);
    if (userInfo!=null) {
      this.setData({
        userInfo: userInfo,
        hasUserInfo: true
      })
      //请求和渲染数据
      // 页面初始化 options为页面跳转所带来的参数
      var that = this
     that.getContentInfo('正在加载数据...')
      

    } else  {
      wx.redirectTo({
        url: '../login/login',
      })
    } 
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },
  
  getContentInfo: function (message) {
    wx.showLoading({
      title: message,
    })
    var sessionKey = wx.getStorageSync(config.TOKEN_KEY);
    console.log(sessionKey);
    var that = this;
    wx.request({
      url: config.getFullurl("/getContentList"),
      method: "POST",
      data: {
        pageNum: that.data.pageNum,
        pageSize:that.data.pageSize
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'WX_TOKEN': sessionKey
      },
      success: function (res) {
        var contentlistTem = that.data.contentlist;
        if(res.data.status==200){
          if (that.data.pageNum == 1) {
            contentlistTem = []
          }
          var contentlist = res.data.data.pageData;
          if (that.data.pageNum >= res.data.data.pageInfo.pageCount){
            that.setData({
              contentlist: contentlistTem.concat(contentlist),
              hasMoreData: false
            })
          }else{
            that.setData({
              contentlist: contentlistTem.concat(contentlist),
              hasMoreData: true,
              pageNum: that.data.pageNum + 1
            })
          }

        }else{
          wx.showToast({
            title: res.data.msg,
            success:function(){
              wx.redirectTo({
                url: '../login/login',
              })
            }
          })
        }


      },
      fail:function(){
        wx.showToast({
          title: '加载数据失败',
          icon: none
        })
      },
      complete:function(){
        wx.hideLoading();
        // complete
        wx.hideNavigationBarLoading() //完成停止加载
        wx.stopPullDownRefresh() //停止下拉刷新
      }
    })
  },
  /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
  onPullDownRefresh: function () {
    console.log('下拉');
    wx.showNavigationBarLoading() //在标题栏中显示加载
    this.data.pageNum = 1
    this.getContentInfo('正在刷新数据')
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.hasMoreData) {
      this.getContentInfo('加载更多数据')
    } else {
      wx.showToast({
        title: '没有更多数据',
      })
    }
  },
  suo: function (e) {
    wx.navigateTo({
      url: '../search/search',
    })
  },
})

wxml

<!--index.wxml-->
<view class="container">
  <view class='page_row' bindtap="suo">
    <view class="search">
      <view class="df search_arr">
        <icon class="searchcion" size='20' type='search'></icon>
        <input class="" disabled placeholder="搜索" value="{{searchValue}}"/>
      </view>
    </view>
    <!-- <view class='sousuo'>搜索</view> -->
  </view>
  <!-- <view class="userinfo">
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view> -->
  <!-- <block wx:for="{{contentlist}}" wx:for-item="item" wx:key="content_id" >
  <navigator url="/pages/detail/detail?contentId={{item.content_id}}">
   <view> {{item.content_id+"---"+item.title}} </view>
   </navigator>
   </block>-->
</view> 

<view class="list" wx:for="{{contentlist}}" wx:for-item="item" wx:key="content_id" >
<navigator url="/pages/detail/detail?contentId={{item.content_id}}">
     <view class="list-item list-item-middle">
       <view class="f-b f-black">{{item.content_id}}</view>
        <view class="f-gray">{{item.title}}</view>
    </view>
   <view class="list-item list-item-right">
      <view class="f-gray f30"> {{item.release_date}}</view>
    
    </view>
    </navigator>
</view>