微信小程序 scroll-view 组件的 bindscroll 不触发不生效

微信小程序scroll-view的bindscroll不生效问题
本文讲述使用微信小程序基础组件scroll - view时,bindscroll滑动不生效的问题。总结了几类不生效原因,如未设置高度、未设定scroll - y等。作者的问题是高度设为100%可能未生效,修改后问题解决。

使用微信小程序基础组件中的scroll-view,但是滑动的时候 bindscroll 一直不生效。

<view class="container log-list">
  <scroll-view scroll-y style="height:100%;white-space:nowrap;" scroll-into-view="{{toView}}" enable-back-to-top bindscroll="scroll" scroll-with-animation scroll-top="{{scrollTop}}">
 <view class="list-group" wx:for="{{logs}}" wx:for-item="group">
  <view class="title" id="{{group.title}}">{{group.title}}</view>
  <block wx:for="{{group.items}}" wx:for-item="user">
   <view id="" class="list-group-item">
    <image class="icon" src="{{user.avatar}}" lazy-load="true"></image>
    <text class="log-item">{{user.name}}</text>
   </view>
  </block>
 </view>
</scroll-view>

在网上查了资料,发现了几类不生效的原因,总结如下:

1、没有设置高度,根据小程序文档,在使用 scroll-view 组件用于竖向滚动时一定要设置高度。

2、没有设定scroll-y
3、组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。设定百分比高度可能不生效
4、scroll-view 里有两个子元素,加一个view给包起来
5、滚动的可能是page,如果确定page里的内容不需要滚动。只滚动scroll-view里的内容,禁用页面滚动

发现我的问题应该是第3种情况,高度设置的100%可能没生效,修改如下:

<scroll-view scroll-y style="height:100vh;white-space:nowrap;" scroll-into-view="{{toView}}" enable-back-to-top bindscroll="scroll" scroll-with-animation scroll-top="{{scrollTop}}">

测试后问题解决了,

### `scroll-view` 组件中 `bindscroll` 和 `binddragging` 事件的区别 在微信小程序中,`scroll-view` 是一个支持滚动的视图容器组件,常用于实现横向或纵向的滚动布局。该组件提供了多个事件用于响应滚动行为,其中 `bindscroll` 和 `binddragging` 是两个常见的事件,它们在触发时机和使用场景上有所同。 #### `bindscroll` 事件 `bindscroll` 事件在滚动过程中持续触发,每次滚动都会回调该事件。它返回的 `event.detail` 中包含当前滚动的位置信息,如 `scrollLeft`、`scrollTop`、`scrollHeight`、`scrollWidth` 以及滚动的偏移量 `deltaX` 和 `deltaY`。这个事件适用于需要实时获取滚动位置的场景,例如实现吸顶效果、动态计算滚动进度等。 示例代码如下: ```javascript Page({ data: { scrollLeft: 0, scrollTop: 0 }, handleScroll(e) { const { scrollLeft, scrollTop } = e.detail; this.setData({ scrollLeft, scrollTop }); } }); ``` 该事件适用于监听滚动位置变化并进行动态处理的情况[^1]。 #### `binddragging` 事件 `binddragging` 事件则是在用户拖动滚动条时触发,仅在拖动过程中生效,包括通过代码触发的滚动行为。它返回的 `event.detail` 中同样包含 `scrollLeft` 和 `scrollTop` 等信息,但会提供 `deltaX` 和 `deltaY`。此事件适用于需要区分用户手动拖动与程序自动滚动的场景,例如在拖动时显示提示信息或进行交互反馈。 示例代码如下: ```javascript Page({ handleDragging(e) { const { scrollLeft, scrollTop } = e.detail; console.log(`当前滚动位置:scrollLeft=${scrollLeft}, scrollTop=${scrollTop}`); } }); ``` 此事件通常用于用户交互反馈,而是用于实时位置更新。 #### 两者的主要区别 - **触发时机**:`bindscroll` 在滚动过程中持续触发,包括通过代码调用 `scrollTo` 触发的滚动;而 `binddragging` 仅在用户手动拖动滚动条时触发- **数据内容**:`bindscroll` 提供了完整的滚动信息,包括偏移量 `deltaX` 和 `deltaY`;而 `binddragging` 包含这些偏移量。 - **适用场景**:`bindscroll` 适用于需要实时更新滚动位置的场景,如吸顶效果或进度条联动;`binddragging` 更适合用于用户交互反馈,例如在拖动时高亮显示某些元素。 ### 相关问题 1. 如何在微信小程序中实现吸顶效果? 2. 微信小程序中如何通过代码控制 `scroll-view` 的滚动位置? 3. 如何在 `scroll-view` 滚动时显示加载动画? 4. `scroll-view` 和 `movable-view` 在滚动行为上的区别是什么? 5. 如何在 `scroll-view` 中监听滚动方向并做出响应?
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值