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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用微信小程序基础组件中的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` 组件自动滚动到最底部 为了确保 `scroll-view` 能够正确地滚动到底部,在设置 `scroll-top` 属性时需要注意该属性仅在数值变化时触发更新。因此,可以通过动态调整 `scroll-top` 的值来实现每次都能顺利滚动至底部。 #### 方法一:利用定时器刷新 `scroll-top` 通过设定一个稍大于当前最大高度的值作为初始 `scroll-top` 值,并借助 JavaScript 定时器延迟执行实际的高度赋值操作,从而达到平滑过渡的效果[^2]: ```javascript Page({ data: { scrollTop: 1000, // 初始较大值以立即跳转到底部 }, onLoad() { setTimeout(() => { this.setData({scrollTop: 999}); }, 0); } }) ``` #### 方法二:监听输入框聚焦状态并即时响应 对于涉及用户交互场景下的自动滚底需求(如聊天界面),可以在页面加载完成以及每当输入框获得/失去焦点时重新计算并设置新的 `scroll-top` 数值,以此保证消息列表始终处于最新位置显示: ```html <view> <!-- 输入区 --> <input bindfocus="onInputFocus" /> </view> <!-- 消息展示区 --> <scroll-view scroll-y="{{true}}" lower-threshold="50" bindscrolltolower="loadMoreMessages"> ... </scroll-view> ``` ```javascript Page({ onInputFocus(e){ const query = wx.createSelectorQuery(); query.select('.message-list').boundingClientRect((rect)=>{ if (rect !== null && rect.height > 0) { this.setData({scrollTop: rect.bottom + 1}); } }).exec(); }, loadMoreMessages(){ // 加载更多数据逻辑... } }) ``` 以上两种方式均能有效解决 `scroll-top` 默认只首次生效的问题,具体采用哪种取决于应用场景和个人偏好。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值