微信小程序 在bindscroll事件中监听scroll-view滚动到底

scroll-view其实提供了一个 bindscrolltolower 事件 这个事件的作用是直接监听scroll-view滚动到底部
但是 总有不太一样的情况

公司的项目 scroll-view 内部 最下面有一个 类名叫 bottombj 的元素
我希望 滚动到这个 bottombj 上面的时候就开始加载滚动分页 简单说 bottombj这块元素不参与滚动分页
在这里插入图片描述
但 bindscrolltolower 只会判断 是否到了当前scroll-view最底部 而无法动态拒绝某块元素参与

所以 我们只能寄希望于 bindscroll
首先 我们要给自己的scroll-view加一个id 方便我们去那这块元素
这里 我直接叫 scroll-page
在这里插入图片描述
然后 我们在 bindscroll="bindscrolltolower"中直接这样写

const query = wx.createSelectorQuery()
query.select('#scroll-page').boundingClientRect()
query.exec((res) =>{
    if ((e.detail.scrollHeight - e.detail.scrollTop) <= (res[0].height + 1)) {
        console.log("执行滚动分页逻辑");
    }
});

那么 我们如果 不想bottombjBox参与
这样写

const query = wx.createSelectorQuery()
query.select('#scroll-page').boundingClientRect()
query.select('.bottombjBox').boundingClientRect()
query.exec((res) =>{
    if (((e.detail.scrollHeight-res[1].height) - e.detail.scrollTop) <= (res[0].height + 1)) {
        console.log("执行滚动分页逻辑");
    }
});

我们只需要 通过query将 .bottombjBox 一起捕获 因为 后捕获的 bottombjBox 所以他是 1下标
去和总高度减一下就好了

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
除了使用`scroll-view`组件来实现滚动外,微信小程序还提供了一种不用`scroll-view`组件的方式来实现滚动,即使用`transform`属性来实现。 具体实现方法是,在需要滚动的元素上添加一个`transform: translateY()`样式,并且在JS文件监听`touchstart`、`touchmove`、`touchend`事件,通过计算手指移动的距离来实现元素的滚动。 下面是一个示例代码: ``` <view class="container" style="transform: translateY({{scrollTop}}px);"> <view class="item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view> </view> ``` 在上面的代码,我们在一个`<view>`元素上添加了`transform: translateY()`样式,并使用`{{scrollTop}}`来动态计算滚动的距离。 在JS文件,我们需要定义`touchstart`、`touchmove`、`touchend`事件监听器,并在其实现滚动逻辑: ``` Page({ startY: 0, moveY: 0, distanceY: 0, scrollTop: 0, onTouchStart: function(e) { this.startY = e.touches[0].clientY }, onTouchMove: function(e) { this.moveY = e.touches[0].clientY this.distanceY = this.moveY - this.startY this.scrollTop += this.distanceY this.startY = this.moveY this.setData({ scrollTop: this.scrollTop }) }, onTouchEnd: function(e) { // 处理滚动结束事件 } }) ``` 在上面的代码,我们定义了一个名为`onTouchStart`的函数来处理`touchstart`事件,并记录手指触摸的起始位置。同时,我们还定义了一个名为`onTouchMove`的函数来处理`touchmove`事件,并计算手指移动的距离,并通过`setData`方法将`scrollTop`属性更新为新的滚动距离。最后,我们还定义了一个名为`onTouchEnd`的函数来处理`touchend`事件,并在其处理滚动结束的逻辑。 需要注意的是,使用`transform`属性来实现滚动的方式,需要手动处理滚动的逻辑,相对于使用`scroll-view`组件来说,实现起来更加复杂。同时,由于使用了`transform`属性,可能会导致一些性能问题,需要根据实际情况进行优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值