微信小程序中如果判斷頁面滾動方向？
成都創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團隊，在互聯(lián)網(wǎng)網(wǎng)站建設行業(yè)深耕10余年，專業(yè)且經(jīng)驗豐富。10余年網(wǎng)站優(yōu)化營銷經(jīng)驗，我們已為近1000家中小企業(yè)提供了成都做網(wǎng)站、成都網(wǎng)站建設、成都外貿(mào)網(wǎng)站建設解決方案，定制網(wǎng)站設計，設計滿意，售后服務無憂。所有客戶皆提供一年免費網(wǎng)站維護!
解決方案
1.用到微信小程序API
獲取頁面實際高度 nodesRef.boundingClientRect([callback])
監(jiān)聽用戶滑動頁面事件onPageScroll。
2.獲取頁面實際高度
重慶分公司
重慶分公司
/* JS */
// 封裝函數(shù)獲取ID為box的元素實際高度
getScrollHeight: function() {
wx.createSelectorQuery().select('#box').boundingClientRect((rect) => {
this.setData({
scrollHeight: rect.height
})
console.log(this.data.scrollHeight)
}).exec()
},
// 假設數(shù)據(jù)請求
getDataList: function() {
wx.request({
url: 'test.php', //僅為示例，并非真實的接口地址
success: function(res) {
// 如果該元素下面的數(shù)據(jù)是動態(tài)獲取的，此方法在wx.request請求成功的回調函數(shù)中調用
this.getScrollHeight()
}
})
},
3.監(jiān)聽用戶滑動頁面事件
//監(jiān)聽用戶滑動頁面事件
onPageScroll: function(e) {
if (e.scrollTop <= 0) {
// 滾動到最頂部
e.scrollTop = 0;
} else if (e.scrollTop > this.data.scrollHeight) {
// 滾動到最底部
e.scrollTop = this.data.scrollHeight;
}
if (e.scrollTop > this.data.scrollTop || e.scrollTop >= this.data.scrollHeight) {
//向下滾動
console.log('向下 ', this.data.scrollHeight)
} else {
//向上滾動
console.log('向上滾動 ', this.data.scrollHeight)
}
//給scrollTop重新賦值
this.setData({
scrollTop: e.scrollTop
})
},
PS:微信小程序滾動到某個位置改變效果
Some of the words
//JS文件
//滾動監(jiān)聽
scroll: function (e) {
this.setData({
scrollTop:e.detail.scrollTop
})
}
其中，variable為全局變量，class1、class2即為相應的css
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
