1、使用scroll-view实现滚动下拉
wxml
<scroll-view wx:if="{{plotArr.length > 0}}" scroll-y="{{true}}" style="margin:30rpx auto 80rpx;height:{{massifHeight}}px;" bindscrolltolower="lower">
里面包着你的列表代码
</scroll-view>
js
var http = require('../../utils/request.js'); //相对路径
data: {
plotArr: [],
pageNum: 1,
pageSize: 10,
total: 0,
flag:true // 防抖开关 防止用户不停的下拉
},
方法:
// 列表
getPlotList() {
var params = {
pageNum: this.data.pageNum,
pageSize: this.data.pageSize
}
var that = this
http.getRequest('/wx/userPlough/page', params, function (res) {
if (res.code === 200) {
let list = that.data.plotArr
//先处理成你想要的数据 下面再去赋值
res.rows.map(item=>{
return item['pipelineData'] = JSON.parse(item.pipelineData)
})
if (that.data.pageNum == 1) {
list = []
}
// 新旧数据合并到一起
list = [...list, ...res.rows]
if (list.length < res.total ){
that.setData({
pageNum: that.data.pageNum + 1,
flag:true
})
} else {
that.setData({
flag:false
})
}
that.setData({
plotArr: list,
total: res.total
})
}
}, function (res) {
})
},
// 滚动到底触发的方法
lower(){
if(this.data.flag){
this.setData({
flag:false
})
this.getPlotList(); // 疯狂的请求的方法
}
},
2、使用小程序自带的下拉触底方法
wxml中直接用正常的view布局写就可以
js
data: {
questList: [],
pageNum: 1,
pageSize: 10,
total: 0,
flag: true, // 防抖开关 防止用户不停的下拉
},
方法:
// 问题列表
getQuestList() {
var that = this;
var params = {
pageNum: that.data.pageNum,
pageSize: that.data.pageSize
}
http.getRequest('/wx/questionsAnswers/page', params, function (res) {
if (res.code === 200) {
let list = that.data.questList
res.rows.map((item) =>{
return item.t = false;
})
if (that.data.pageNum == 1) {
list = []
}
list = [...list, ...res.rows]
if (list.length < res.total ){
that.setData({
pageNum: that.data.pageNum + 1,
flag:true
})
} else {
that.setData({
flag:false
})
}
that.setData({
questList: list,
total: res.total
})
}
}, function (res) {
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if(this.data.flag){
this.setData({
flag:false
})
this.getQuestList(); // 疯狂的请求的方法
}
},
好像我写的这两种差别不大,但是纯属记录