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

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

html 复制代码
<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%可能没生效,修改如下:

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}}">

测试后问题解决了,

相关推荐
天_真好3 小时前
小程序知识点总结1
小程序
gurenchang3 小时前
实现从一个微信小程序跳转到另一个微信小程序
微信小程序·小程序
编程毕设6 小时前
【含文档+PPT+源码】基于微信小程序的校园快递平台
微信小程序·小程序
mon_star°8 小时前
搭建基于火灾风险预测与防范的消防安全科普小程序
安全·微信小程序·小程序·微信公众平台
换日线°11 小时前
CSS常遇到自适应高度动画、带三角气泡阴影一行样式解决
css·微信小程序
yuanmenglxb200414 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
编程毕设15 小时前
【含文档+PPT+源码】基于微信小程序连锁药店商城
微信小程序·小程序
幽络源小助理15 小时前
微信小程序鲜花销售系统设计与实现
微信小程序·小程序
换日线°17 小时前
CSS简单实用的加载动画、骨架屏有效果图
css·微信小程序
10年前端老司机17 小时前
微信小程序wxs
前端·javascript·微信小程序