微信小程序之判斷頁面滾動方向的示例代碼
更新時間：2018年08月30日 10:50:02 作者：月影
這篇文章主要介紹了微信小程序之判斷頁面滾動方向的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
微信小程序中如果判斷頁面滾動方向？
解決方案
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è)數(shù)據(jù)請求
getDataList: function() {
wx.request({
url: 'test.php', //僅為示例，并非真實的接口地址
success: function(res) {
// 如果該元素下面的數(shù)據(jù)是動態(tài)獲取的，此方法在wx.request請求成功的回調(diào)函數(shù)中調(diào)用
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即為相應(yīng)的css
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
indexOf()函數(shù)用于查找子字符串在當(dāng)前字符串中第一次出現(xiàn)的位置。該函數(shù)屬于String對象，所有主流瀏覽器均支持該函數(shù)。下面我們就來詳細探討下javascript的index0f()函數(shù)2015-05-05
這篇文章主要介紹了es6數(shù)組之?dāng)U展運算符操作,結(jié)合實例形式總結(jié)分析es6數(shù)組擴展運算符具體原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2020-04-04
本篇文章主要介紹了Js自定義多選效果的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
下面小編就為大家?guī)硪黄P(guān)于Promise 異步編程的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本文主要分享了canvas繪制七巧板的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了JS實現(xiàn)給不同元素設(shè)置不同的定時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了原生小程序封裝跑馬燈效果，由多條銜接改動得到，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了JavaScript模板引擎實現(xiàn)原理詳解,本文著重講解artTemplate模板的實現(xiàn)原理,它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍,是其它知名模板引擎的25、32 倍,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了js獲得參數(shù)的getParameter使用示例,需要的朋友可以參考下2014-02-02