惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
Google Developers Blog
有赞技术团队
有赞技术团队
WordPress大学
WordPress大学
博客园 - 司徒正美
D
Docker
B
Blog
V
Visual Studio Blog
Blog — PlanetScale
Blog — PlanetScale
U
Unit 42
S
SegmentFault 最新的问题
小众软件
小众软件
J
Java Code Geeks
美团技术团队
腾讯CDC
MyScale Blog
MyScale Blog
爱范儿
爱范儿
H
Help Net Security
宝玉的分享
宝玉的分享
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans
Google DeepMind News
Google DeepMind News
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 三生石上(FineUI控件)
博客园 - 【当耐特】

博客园 - JoeYoung

nvm-windows 实现 Node 多版本管理 收官大吉,来年可期 本地部署 DeepSeek+VS Code,搭建本地大模型 电脑安装 Win10 提示无法在当前分区上安装Windows的解决办法 Ollama可以不装在C盘,安装时选择路径 Swiper 自动无缝匀速滚动 Swiper 实现奇葩需求案例 Vue+ElementUI 导出为PDF文件 table 中设置宽度被td或th里的内容撑开超出 在页面离开前提醒你的 beforeunload 事件 npm安装依赖包的多种镜像及方法 通栏中不定数量的图片/轮播自适应宽高的简单示例 微信小程序 input 不能输入特殊字符的方法 微信小程序 input中输入内容后还提示请输入的解决办法 CSS的逻辑组合伪类 CSS结构伪类选择器之否定伪类:not() jQuery 指定区域的内容循环滚动 scroll-view 组件里的 scroll-into-view 属性实例 微信小程序 授权登录时不得默认强制用户同意隐私政策协议
微信小程序 scroll-view 组件的 bindscroll 不触发不生效
JoeYoung · 2023-08-29 · via 博客园 - JoeYoung

使用微信小程序基础组件中的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}}">

测试后问题解决了,