首页 > 编程语言 >微信小程序 scroll-view 组件的 bindscroll 不触发不生效

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

时间:2023-08-29 15:36:02浏览次数:51  
标签:滚动 微信 组件 生效 bindscroll scroll view

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

测试后问题解决了,

 

标签:滚动,微信,组件,生效,bindscroll,scroll,view
From: https://www.cnblogs.com/joe235/p/17664914.html

相关文章

  • 零代码,使用 Dify 和 Laf 两分钟接入企业微信 AI 机器人
    Dify允许创建AI应用,并提供二次开发的能力。这里我将演示创建一个法律问答助手的AI应用,称作“知法”。在本篇教程中,我将指导你为“知法”接入企业微信。前置准备企业微信的管理员权限一个Dify的帐号一个Laf云的帐号(可选)一个OpenAI的APIKey。如果没有,可以使用Di......
  • 开发微信小程序技术栈
    开发微信小程序主要需要以下技术栈: 小程序框架参考文档小程序组件参考文档小程序API参考文档小程序服务端API参考文档微信开发者工具参考文档微信云托管参考文档微信云开发参考文档 1.HTML:微信小程序的界面主要由HTML5构建,因此熟悉HTML5语法和常用标签是必......
  • [Android 分享] [教程] 微信抓不到包?根本不存在!----一招搞定微信内置浏览器抓包
    [教程]微信抓不到包?根本不存在!----一招搞定微信内置浏览器抓包-『移动安全区』-吾爱破解-LCG-LSG|安卓破解|病毒分析|www.52pojie.cn 所需工具1.一部手机2.一台电脑3.一条数据线情景模拟某个网页只能在微信中打开,但我想要抓包调试怎么办?1.HttpCannary(小......
  • 微信客服系统-授权注册客服账号
    为了方便用户快速注册客服账号,体验客服系统的功能。特别基于微信公众号网页授权机制,获取到微信昵称、头像、openID直接注册进入客服系统。详细流程打开微信-扫描下面二维码-允许获取权限-进入客服系统H5聊天测试客服系统H5-底部菜单【我的】-访客聊天链接直接访问聊......
  • 微信开发之一键创建微信群聊的技术实现
    创建微信群本接口为敏感接口,请查阅调用规范手册创建后,手机上不会显示该群,往该群主动发条消息手机即可显示。请求URL:http://域名地址/createChatroom请求方式:POST请求头Headers:Content-Type:application/jsonAuthorization:login接口返回参数:参数名必选类型说......
  • 微信小程序字体在部分真机失效解决办法
    uniapp微信小程序字体加载1、使用uni.loadFontFaceuni.loadFontFace({global:true,//开启全局生效family:'PingFangSC',source:'url("https://fonts/xs.ttf")',success(){console.log('success')},fail(e){......
  • 关注微信公众号推送消息
    微信关注二维码的主要开发思路:第一步,向用户展示要扫的二维码:通过提前申请的appid和秘钥去拿token,通过token再去微信服务上拿要关注的图片二维码,将二维码展示在你系统中。第二步,用户扫码:用户扫码时会向微信发信息,并且微信会回调你的自己的服务,需要你将关注的用户信息保存下来;......
  • 手把手教你如何实现企业微信Jenkins 构建发布通知
    一.前言在企业项目发版本过程中,以Jenkins为例,个别项目构建时间较长,不想时刻关注构建情况,或构建成功后移交其他人继续处理,需要配置企业微信通知功能,本篇主要是针对pipeline流水线项目,如何实现Jenkins构建成功与否通知到消息至企业微信指定人二.实现过程2.1企业微信创建机器人这里采......
  • 微信小程序 type="nickname" 点击后,获取不到最新值
    在uniapp开发微信小程序,或是使用小程序开发平台开发,会涉及到获取用户的头像和昵称,而在最新的微信小程序基础库,getUserInfo等不能在获取这些信息,官方推荐使用头像昵称填写能力(基础库2.21.2版本开始支持,覆盖iOS与安卓微信8.0.16以上版本),下面讲讲我在使用过程中遇到的问题。<bu......
  • vue微信H5项目使用腾讯地图获取当前位置经纬度
    1.在index.html引入js文件<scriptsrc="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>2.在需要页面中你自己的key要去腾讯地图工具去申请https://lbs.qq.com/webApi/component/componentGuide/componentPickercreated(){this.getM......