需求
微信小程序中如果判斷頁(yè)面滾動(dòng)方向？
解決方案
1.用到微信小程序API
2.獲取頁(yè)面實(shí)際高度
<!--WXML-->
<view id="box">
<view class="list" wx:for="{{List}}" wx:key="List{{index}}">
<image mode='aspectFill' class='list_img' src="{{item.imgUrl}}" ></image>
</view>
</view>
/* JS */
// 封裝函數(shù)獲取ID為box的元素實(shí)際高度
getScrollHeight: function() {
wx.createSelectorQuery().select('#box').boundingClientRect((rect) => {
this.setData({
scrollHeight: rect.height
})
console.log(this.data.scrollHeight)
}).exec()
},
// 假設(shè)數(shù)據(jù)請(qǐng)求
getDataList: function() {
wx.request({
url: 'test.php', //僅為示例，并非真實(shí)的接口地址
success: function(res) {
// 如果該元素下面的數(shù)據(jù)是動(dòng)態(tài)獲取的，此方法在wx.request請(qǐng)求成功的回調(diào)函數(shù)中調(diào)用
this.getScrollHeight()
}
})
},
|
3.監(jiān)聽(tīng)用戶滑動(dòng)頁(yè)面事件
//監(jiān)聽(tīng)用戶滑動(dòng)頁(yè)面事件
onPageScroll: function(e) {
if (e.scrollTop <= 0) {
// 滾動(dòng)到最頂部
e.scrollTop = 0;
} else if (e.scrollTop > this.data.scrollHeight) {
// 滾動(dòng)到最底部
e.scrollTop = this.data.scrollHeight;
}
if (e.scrollTop > this.data.scrollTop || e.scrollTop >= this.data.scrollHeight) {
//向下滾動(dòng)
console.log('向下 ', this.data.scrollHeight)
} else {
//向上滾動(dòng)
console.log('向上滾動(dòng) ', this.data.scrollHeight)
}
//給scrollTop重新賦值
this.setData({
scrollTop: e.scrollTop
})
},
|
|
