微信小程序 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}}">

测试后问题解决了,

相关推荐
@PHARAOH15 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_117 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙19 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_7978820919 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
暮雨哀尘21 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理1 天前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
zoahxmy09291 天前
微信小程序 request 流式数据处理
微信小程序
人人题2 天前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
曲江涛2 天前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_440470502 天前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云