使用微信小程序基础组件中的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%可能没生效,修改如下:文章来源:https://www.toymoban.com/news/detail-681572.html
<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}}">
测试后问题解决了,文章来源地址https://www.toymoban.com/news/detail-681572.html
到了这里,关于微信小程序 scroll-view 组件的 bindscroll 不触发不生效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!