微信小程序利用Bmob后端云实现：上拉刷新、下拉加载数据

微信小程序下拉加载实现
在微信小程序下拉加载的基础上配合Bmob后端云

注释在代码里面

wxml

  <scroll-view 
   scroll-y
   refresher-enabled
   refresher-triggered="{{isTriggered}}"
   bindrefresherrefresh = "handleRefresher"
   bindscrolltolower="handleToLower"
   style="height: {{windowHeight}}px;">
    <block wx:for="{{oneWordList}}" wx:key="index">
      <view class=" margin padding radius shadow shadow-lg bg-white margin-top">{{item.sentence}}</view>
    </block>
  </scroll-view>

js

var Bmob = require('../../../utils/bmob.js');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    windowHeight: 0,
    oneWordList: [],
    load_oneWordList: [],
    isTriggered: false
  },
  //上拉刷新
  handleRefresher: function () {
    let oneWordBeanData = wx.getStorageSync('oneWordBeanData')
    this.setData({
      oneWordList: oneWordBeanData
    })
    this.setData({
      isTriggered: false
    })
    console.log("下拉刷新")
  },
  // 上拉加载
  handleToLower: function () {
    var _this = this;
    console.log("上拉加载")
    //从本地获取数据
    let oneWordBeanData = wx.getStorageSync('oneWordBeanData')
    //从Bmob请求数据
    const query = Bmob.Query('OneWordBean')
    query.limit(10);
    query.skip(oneWordBeanData.length)
    query.find().then(res => {
      //请求的数据
      let load_oneWordList = res
      //遍历插入数据
      for (let index = 0; index < load_oneWordList.length; index++) {
        const element = load_oneWordList[index];
        oneWordBeanData.push(element)
      }
      //刷新UI
      this.setData({
        oneWordList: oneWordBeanData
      })
      //储存到本地
      wx.setStorageSync('oneWordBeanData', oneWordBeanData)
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    //获取屏幕高度
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          windowHeight: res.windowHeight
        })
        console.log("屏幕高度: " + res.windowHeight)
      }
    })
    let oneWordBeanData = wx.getStorageSync('oneWordBeanData')
    this.setData({
      oneWordList: oneWordBeanData
    })
    console.log(oneWordBeanData.length)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})