微信小程序之判斷頁面滾動方向的示例代碼
微信小程序中如果判斷頁面滾動方向?
解決方案
1.用到微信小程序API
獲取頁面實際高度 nodesRef.boundingClientRect([callback])
監(jiān)聽用戶滑動頁面事件onPageScroll。
2.獲取頁面實際高度
<!--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的元素實際高度
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:微信小程序滾動到某個位置改變效果
<scroll-view>
<view>Some of the words<view>
<view bindscroll="scroll" class="{{variable>200 ? 'class1' : 'class2'}}"</view>
</scroll-view>
//JS文件
//滾動監(jiān)聽
scroll: function (e) {
this.setData({
scrollTop:e.detail.scrollTop
})
}
其中,variable為全局變量,class1、class2即為相應的css
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JS實現(xiàn)可編輯的后臺管理菜單功能【附demo源碼下載】
這篇文章主要介紹了JS實現(xiàn)可編輯的后臺管理菜單功能,涉及javascript針對頁面元素的遍歷及動態(tài)修改相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
BootstrapTable請求數(shù)據(jù)時設置超時(timeout)的方法
使用bootstrapTable獲取數(shù)據(jù)時,有時由于網(wǎng)絡或者服務器的原因,無法及時獲取到數(shù)據(jù),頁面顯示一直處于等待狀態(tài)。為了改善效果,考慮設置超時,請求發(fā)送后超時即顯示無數(shù)據(jù),過段時間重新發(fā)起請求2017-01-01
教你如何使用firebug調試功能了解javascript閉包和this
這篇文章主要介紹了教你如何使用firebug調試功能了解javascript閉包和this,javascript的調試也是一個比較大的難點,很多基礎的東西都需要自己去摸索,這里將自己的經(jīng)驗分享給大家,希望對大家能夠有所幫助2015-03-03
javascript html5輕松實現(xiàn)拖動功能
這篇文章主要為大家詳細介紹了javascript html5輕松實現(xiàn)拖動功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03

