小程序scroll-view组件,无法触发滚动事件

最新推荐文章于 2023-11-06 17:58:41 发布
最新推荐文章于 2023-11-06 17:58:41 发布
阅读量1.1k 收藏 1
点赞数
文章标签： 小程序 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Holy_Q/article/details/105226851
版权

需要给scroll-view设置height:100%

tip: 基础库 2.4.0以下不支持嵌套textarea、map、canvas、video 组件
tip: scroll-into-view 的优先级高于 scroll-top
tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
tip: scroll-view 自定义下拉刷新可以结合 WXS 事件响应 开发交互动画
示例代码

Harry.Q
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 UI与容器组件总结
11-30
微信小程序 UI与容器组件总结     1.总结与概述     2.容器组件             2.1 组件容器（view）             2.2 可滚动视图容器(scroll-view)             2.3 滑块视图容器（swiper） 1.总结与概述 1.1 UI组件总结图  1.2 概述         小程序的UI组件也就是定义用户界面的一系列标签，类似于html标签。一个完整用户响应过程：事件触发——>UI组件接收到事件——>触发js函数响应事件——>更新UI  2.容器组件 2.1 容器组件(view)     (1)总结     (2)例
微信小程序 scroll-view隐藏滚动条详解
01-03
一：scroll-view隐藏滚动条 在书写网页的时候，往往会为了页面的美观，而选择去掉滚动区域默认的滚动条，而在这里，就是为小程序去掉滚动条的其中的一种方法： scroll-view.wxml: scroll-view.wxss scroll-view.js   最终显示效果如下; 注意： （1）不能在scroll-view中使用textarea,mao,canvas,video组件 （2）scroll-init-view的优先级高于scroll-top （3）onPullDownRefresh事件，无法在scroll-view中触发 （4）若想使用下拉刷新，一定要使用页面的滚动，而
微信小程序顶部栏图片随页面滚动渐变展示隐藏
04-18
小程序顶部通栏，展示图片，随着页面滚动，开始渐变展标题记及纯色吸顶样式 主要使用了小程序中的scroll-view组件，通过滚动时触发 bindscroll和滚动到顶部 bindscrolltoupper改变顶部栏的样式效果 动图效果及使用见博客：https://aixiaodou.blog.csdn.net/article/details/124193385
小程序极速实战开发《二》scroll-view可滚动视图区域
03-29
组件说明: 可滚动视图区域。 组件用法：纵向滚动用法 Tip: 使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。 当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出） 当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出） 效果图： (此图片来源于网络，如有侵权，请联系删除! )  wxml <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" b
移动端table表格设置左右滑动后，在table区域不能触发页面的上下滚动
最新发布
William_Zh的博客
11-06 169
在项目中使用table封装了一个表格展示组件，因为移动端屏幕区域有限，设置了左右滑动，结果页面的上下滚动效果在table区域不生效，是怎么回事，有知道的大佬回答一下吗，非常感谢🙏
scroll-view的滚动触底事件
LlanyW的专栏
08-07 702
需要固定一个高度，指定滚动方向 ：scroll-y style="height:{{windowHeight-nav_height}}px;bindscrolltolower="nextPage" ，已经加了触底事件了，但是怎么都触发不了。其他原因：第一个分页数据过少的情况下，也可能因为没有填充满当前高度导致无法触发，这个触底事件。
微信小程序scroll-view设置百分比高度触发滚动事件解决方法
qq_36635569的博客
02-25 1821
我在wxml文件中使用scroll-view，没有给它设置高度，让它自适应，但是一直无法触发滚动事件，我又试了设置百分比高度，还是一样无法触发，网上说是要给scroll-view一个固定高度，但是这样无法满足页面需求。 经过一番研究，我发现微信小程序渲染wxml之后，有一个page标签，于是我想到之前给scroll-view设置高度为100%没有生效，可能是因为page标签没有设置高度，于是我在wxss样式文件中加了一段样式： page{ height: 100%; } 然后scroll-v
小程序--->scroll-view组件不能触发相应滚动事件
Frankltf的博客
12-14 1821
&#13; 小程序scroll-view组件不能触发相应滚动事件 在制作加载更多时会发现不能触发相应事件，一般情况下首先要查看两个必要的属性scroll-view的高度是否设置，第二就是scroll-view的滚动方向是否设置，缺一都有可能导致不能触发相应事件。 //wxml. 这里的高度可以用自适应高度 &lt;scroll-view class='index-conta...
微信小程序滑动scroll-view
weixin_45638909的博客
06-17 1906
首先说一下思路： 1.高度是通过一个二维数组存储的，所以我们只需要先通过自己的实际情况算出这个高度即可。 let arr = [ [0, 522, 1002], [1602, 2004,2006,2010], [2364, 2766], [3126, 3528], [3888, 4290] ] 2.点击的时候我们直接通过index...
微信小程序：scroll-view组件滑动多次触发scroll事件的bug解决
热门推荐
小熊的博客
07-23 1万+
在项目开发过程中，组件是微信小程序提供给我们的一个分页器，一般滑动到底部时会触发scroll事件，scroll事件中往往包含对后端数据的请求；若是还未滑动到底部时频繁触发事件，则会频繁发请求，达不到想到的分页效果。 先来说说的用法 &lt;scroll-view scroll-y="true" style="height:{containerHeight}px" lower-threshold...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
主要介绍了微信小程序scroll-view实现滚动穿透和阻止滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小程序中 scroll-view 滚动事件没有触发
业余前端的职业经历
10-18 1241
首先咱看下官网中关于scroll-view的描述哈 可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度 一个固定的高度 很模糊哈。到底是多少固定呢？ 如果事件没有生效可以检查下 1. 有没有设置 scroll-y 或者 scroll-x true 2. 有没有给scroll-view 一个固定的高度 3. scroll-view的高度 < 应该低于子元素的高度总和 以上三条 能解决大部分的问题了, 还没解决私信我 关注我。持续更新 前端知识。 ...
uniapp 打包的h5在安卓Android手机滚动条scroll失效
weixin_40918145的博客
06-14 2779
.uniapp 打包的h5在安卓Android手机滚动条scroll不生效 乍一看，在pc和ios上都没有问题，但是在安卓手机上，滚动条却无效原因：uniapp中，使用滚动条需要用scroll-view标签
uniapp scroll-view滚动条不显示及IOS中问题
細水、長流√的专栏
02-27 3208
最近在对小程序进行一些优化，发现 scroll-view 的两处问题1、IOS手机下scroll-view会存在上拉加载时卡顿情况2、IOS手机下scroll-view会存在点击不触发 navigator-hover 里的css没有找到什么好的解决办法，故只有用view替代了scroll-view。
微信小程序 在bindscroll事件中监听scroll-view滚动到底
weixin_45966674的博客
10-10 2551
scroll-view其实提供了一个 bindscrolltolower 事件 这个事件的作用是直接监听scroll-view滚动到底部。但 bindscrolltolower 只会判断 是否到了当前scroll-view最底部 而无法动态拒绝某块元素参与。然后 我们在 bindscroll="bindscrolltolower"中直接这样写。首先 我们要给自己的scroll-view加一个id 方便我们去那这块元素。所以 我们只能寄希望于 bindscroll。但是 总有不太一样的情况。
微信小程序——scroll 滚动 滚动事件
qq_41141657的博客
02-21 5587
** scroll-view ** 1）&lt;scroll-view&gt;&lt;/scroll-view&gt; 滚动框架 2） &lt;scroll-view &gt; &lt;view id='one' class='scroll-view-item bc_green'&gt;&lt;/view&gt; &lt;view id='two' class='scroll-view-item ...
小程序--scrollview同时滚动--wxs响应事件
hanchengmei的博客
04-29 805
需求： 滚动一个view, 另一个view同时滚动 方案一： 用两个scroll-view, 当a滚动时获取scrollTop并赋值给b的scrollTop，但是会出现延迟并抖动 方案二：用WXS响应时间 官方文档： https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html 思路：1滚动时，改变box-in的top 最终的效果比较流畅 ...
Android监听ScrollView的滚动事件
weixin_30808575的博客
10-14 904
一种可供用户滚动的层次结构布局容器，允许显示比实际多的内容。ScrollView是一种FrameLayout，意味需要在其上放置有自己滚动内容的子元素。子元素可以是一个复杂的对象的布局管理器。通常用的子元素是垂直方向的LinearLayout，显示在最上层的垂直方向可以让用户滚动的箭头。 有时候我们需要监听ScroView的滑动情况，比如滑动了多少距离，是否滑到布局的顶部或者底部。可惜的是SDK...
ScrollView滚动监听事件
LUFANZHENG的专栏
07-14 2685
package com.qf.textscor; import android.os.Bundle; import android.app.Activity; import android.util.Log; import android.view.Menu; import android.view.MotionEvent; import android.view.View;
小程序scroll-view滚动到底部再次触发事件
04-04
可以通过监听scroll-view的scrolltolower事件来实现滚动到底部再次触发事件...注意：scrolltolower事件的触发条件是scroll-view组件的内容高度大于组件高度且滚动到底部，如果内容高度小于组件高度，则不会触发该事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值