微信小程序--组件 下拉加载下一页（scroll-view 并防止抖动）
// homePage/index/index.js
const httpUtils = require("../../utils/httpUtils")
const app = getApp()
var total = 0
var pageNo = 1
const pageSize = 20
Component({
/**
* 组件的属性列表
*/
properties: {},
lifetimes: {
created: function () {
},
attached: function () {
setTimeout(() => {
this.getListHome('fresh')
}, 0)
},
ready: function () {}
},
/**
* 组件的初始数据
*/
data: {
timer: null,
scrollTop: 0,
loading: false,
loadingComplete: false,
newsList: [],
},
/**
* 组件的方法列表
*/
methods: {
//下拉加载
bindDownLoad: function () {
this.loadData()
},
scroll: function (event) {
if (this.timer) {
clearTimeout(this.timer)
}
//定时器在滚动加载时防止抖动
this.timer = setTimeout(() => {
this.setData({
scrollTop: event.detail.scrollTop,
});
}, 2000);
this.setData({
isFixed: event.detail.scrollTop >= 150 ? true : false
});
if (event.detail.scrollTop >= 600) {
this.setTouchShow(true)
} else {
this.setTouchShow(false)
}
},
//上拉刷新
topLoad: function () {
//数据刷新
this.resetData()
},
joinEnterprise() {
wx.showToast({
title: '功能暂未开放',
icon: 'error'
})
},
//页面出现时调用
resetData() {
pageNo = 1
total = 0
pageNo = 1
this.getListHome('fresh')
},
loadData(action) {
if (action == 'fresh') {
pageNo = 1
}
if (action == 'more') {
if (pageNo * pageSize < total) {
pageNo++
this.getListHome('more')
}
} else {
this.getListHome('fresh')
}
},
getListHome(type) {
let url = ""
this.setData({
loading: true,
})
httpUtils.post({
url: url,
data: {
page: pageNo,
pageSize: pageSize,
}
}).then(res => {
// wx.hideLoading()
total = res.total;
this.setData({
loading: false,
loadingComplete: pageNo * pageSize <= total ? false : true,
})
let newsList = res.records||[]
if (type == 'fresh') {
this.setData({
newsList: newsList
})
} else {
this.setData({
newsList: this.data.newsList.concat(newsList)
})
}
this.setData({
noData: this.data.newsList.length ? false : true
})
}).finally(err => {
this.setData({
loading: false,
loadingComplete: pageNo * pageSize <= total ? false : true,
})
this.setData({
noData: this.data.newsList.length ? false : true
})
})
},
//回到顶部，内部调用系统API
goTopOn() {
this.setData({
scrollTop: 0
})
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低，暂无法使用该功能，请升级后重试。'
})
}
},
setTouchShow(touchShow) {
this.setData({
touchShow
})
},
}
})