微信小程序中使用 bindscrolltolower 下拉加载有时候不触发

微信小程序中使用 bindscrolltolower 下拉加载有时候不触发,第1张

在容器内向下滚动内容至底部的时候,偶尔会出现不触发bindscrolltolower事件,还是可以触发,但是必须先下滑再上拉才能触发

应该是因为安卓手机下拉滑动到底部时,系统监听到距离底部的距离通常大纳或枯团或于50,所以不能触发相应的函数;而小程序默认下拉离底部50px时触发函数(ios没有这种情况)

可以通过官网洞洞给出的属性让他在滑动到底部之前执行加载

将lower-threshold设置成200

微信小程羡盯羡序的滑动事件是通过bindtouchmove实现的,通过比较滑动事件前后的坐标判断滑动方向,微信小程序通过则中三个事件共同作用实现了触摸滑动事件,即 bingtouchstart、bindtouchmove 和 bindtouchend 事件。

WXML:

<view class='btn' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>

OK

</view>

JS:

data: {

touchS : [0,0],

touchE : [0,0]

},

touchStart: function(e){

// console.log(e.touches[0].pageX)

let sx = e.touches[0].pageX

let sy = e.touches[0].pageY

this.data.touchS = [sx,sy]

},

touchMove: function(e){

let sx = e.touches[0].pageX

let sy = e.touches[0].pageY

this.data.touchE = [sx, sy]

},

touchEnd: function(e){

let start = this.data.touchS

let end = this.data.touchE

console.log(start)

console.log(end)

if(start[0] <end[0] - 50){

console.log('右滑')

}else if(start[0] >兄拍 end[0] + 50){

console.log('左滑')

}else{

console.log('静止')

}

},

在 touchstart 时,监听到触摸开始时的 (x, y)位置;在 touchMove 方法中持续监听触摸点的位置(x, y),并保存在 data 中;在 touchEnd 方法中对开始的触摸位置和结束的触摸位置进行判断,如果移动距离大于 50 则判定为发生触摸滑动事件。

在上面示例中,当 X 轴方向的移动超过 50 时即判定为左滑或右滑,相应的也可以通过判断 Y 轴方向的滑动长度,来判断上滑或是下滑,由此实现触摸滑动的功能。

更多信息联系我的微

让微信小程序中间的图标也跟着图上下滑动方法如下:

1、在WXML文件中创建一个固定高度的区域,并设置其为可滚动的。

2、在该区域内添加两个元素:一个用于显示上下滑动的图片,另一个用于显示图标。

3、在CSS样式文件中,对这两个元素分别设置相应的位置和样式。其中,上下滑动的图片需要设置position:absolute。top:0。left:0。width:100%。height:auto。z-index:-1。等属性,使其能够覆盖住整个区域并与图标区分开来。而图姿轿配标元素则需要设置position:relative。等属性来保证其相对于父元素的位置不变。

4、使用JavaScript监听区域的滚动事件,获取当前滚动迹指位置,并将其赋值给图标元素的top属性,以实现图标随帆毕着滚动上下移动。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12297063.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存