微信小程序之判断页面滚动方向的示例代码

微信小程序中如果判断页面滚动方向?

解决方案

1.用到微信小程序API

获取页面实际高度 nodesRef.boundingClientRect([callback])

监听用户滑动页面事件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 */

// 封装函数获取ID为box的元素实际高度

getScrollHeight: function() {

wx.createSelectorQuery().select('#box').boundingClientRect((rect) => {

this.setData({

scrollHeight: rect.height

})

console.log(this.data.scrollHeight)

}).exec()

},

// 假设数据请求

getDataList: function() {

wx.request({

url: 'test.php', //仅为示例,并非真实的接口地址

success: function(res) {

// 如果该元素下面的数据是动态获取的,此方法在wx.request请求成功的回调函数中调用

this.getScrollHeight()

}

})

},

3.监听用户滑动页面事件

//监听用户滑动页面事件

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文件

//滚动监听

scroll: function (e) {

this.setData({

scrollTop:e.detail.scrollTop

})

}

其中,variable为全局变量,class1、class2即为相应的css

以上是 微信小程序之判断页面滚动方向的示例代码 的全部内容, 来源链接: utcz.com/z/344901.html

回到顶部