拿部分代碼舉個栗子:
mounted() {
//第一步：導入插件后，在mounted中初始化插件
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.itemScroll, {
click: true,
probeType: 3
})
this.scroll.on('scroll', (pos) => {
if (pos.y > 50) {
//下拉高度大於50 (看自己需要)
this.dropDown = true
//邏輯操作，我這是顯示下拉提示組件
} else {
this.dropDown = this.isLoading ? true : false
//isloading 表示正在加載數據(加載中也顯示下拉提示組件)
}
})
//touchEnd（手指離開以后觸發） 通過這個方法來監聽下拉刷新
this.scroll.on('touchEnd', (pos) => {
// 下拉動作
if (pos.y > 50) {
this.isLoading = true
this.page = 1
this.getPostList().then(res => {
//此處請求接口，處理數據，具體邏輯看自己需求，此處僅供參考
this.list = res.list
this.com_info = res.list.comment_info
this.downTip = 2
//提示內容
setTimeout(() => {
this.isLoading = false
this.dropDown = false
this.downTip = 1
}, 1000)
})
}
//上拉加載 總高度>下拉的高度+數值(20僅供參考) 觸發加載更多
if (this.scroll.maxScrollY > pos.y + 20) {
//使用refresh 方法 來更新scroll 解決無法滾動的問題
if (this.isMorePage) {
//判斷是否有下一頁
this.pullUp = true
//顯示上拉提示組件
this.page++
this.getPostList().then(res => {
//調用接口，處理數據
this.pullUp = false
this.list = this.list.concat(res.list)
this.scroll.refresh()
//刷新插件!!!!!這個挺重要的！別忘了。不然會一卡一卡
})
}
}
})
})
},