微信小程序下拉加载实现
在微信小程序下拉加载的基础上配合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 () {
}
})