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

最新推荐文章于 2024-06-07 14:24:16 发布

joe0235

最新推荐文章于 2024-06-07 14:24:16 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信/小程序文章标签：微信小程序小程序 bindscroll scroll-view

本文链接：https://blog.youkuaiyun.com/joe0235/article/details/132562316

微信/小程序专栏收录该内容

15 篇文章

订阅专栏

本文讲述使用微信小程序基础组件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}}">

测试后问题解决了，