微信小程序scrollView的bindscrolltolower不触发的情况

最新推荐文章于 2024-04-29 16:23:43 发布
最新推荐文章于 2024-04-29 16:23:43 发布
阅读量2.3k 收藏 1
点赞数 4
分类专栏： 小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ckmzlf/article/details/122963759
版权

scrollView的bindscrolltolower是实现滚动加载的方法，如果不注意会发生无法触发的情况，需要两个条件

1.page未设置成100vh,在app.wxss设置

page{
 height:100vh
}

2.scrollView设置成100vh

综合两个条件就不会出现bindscrolltolower无法触发的情况

ckmzlf
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序之拖拽排序（代码分享）
12-29
index.wxml <!--index.wxml--> <view class=container> <view bindtap=box class=box> <view disable-scroll=true wx:for={{content}} bindtouchmove=move bindtouchstart=movestart bindtouchend=moveend data-index={{item.id}} data-main={{mainx}} class=main {{mainx == item.id? 'mainmove'
精确计算微信小程序scrollview高度，全机型适配
03-29
众所周知，可以滑动的 scroll 组件在移动端非常的重要，几乎每个页面都要用到。 而小程序的 scroll-view 组件就比较坑了，非得指定一个高度才能正常使用。布局复杂的时候谁还给你算高度啊。。。 坑归坑，没办法，还是得用……既然官方要求必须传高度，那就想办法计算吧。 一、布局分析，推导公式 先给个示例图： (此图片来源于网络，如有侵权，请联系删除! ) 这是一个稍微复杂点的页面，最上面是两个 tab 标签，每个标签的页面是一个子组件。第二个子组件布局是上面一个标题，下面是 scroll-view 。 再画个解剖图吧…… (此图片来源于网络，如有侵权，请联系删除! ) 页面分三部分，ta
uniapp scroll-view scrolltolower触底事件有时候不触发的问题
ZGG的博客
02-24 573
出现触底不触发加载需要上拉在下拉才触发的问题
微信小程序中 scroll-view 属性 bindscrolltolower 事件触发不生效
徐同泽的博客
01-15 1万+
最近做公司微信小程序的项目时 遇到的问题 记录一下文帝防止日后出现相同的错误 问题所在：处理滚动到底部 触发滚动到底部事件 (bindscrolltolower) 的时候 并没有 生效！ 经过多方面的资料排查，以及官方文档的查询 终于解决了 本人的困惑 &lt;scroll-view class='pages-container' scroll-y="true" ...
小程序下滑 bindscrolltolower ,加载数据
qq_41737172的博客
07-12 211
【代码】小程序下滑 bindscrolltolower ,加载数据。
微信小程序 在bindscroll事件中监听scroll-view滚动到底
weixin_45966674的博客
10-10 2551
scroll-view其实提供了一个 bindscrolltolower 事件 这个事件的作用是直接监听scroll-view滚动到底部。但 bindscrolltolower 只会判断 是否到了当前scroll-view最底部 而无法动态拒绝某块元素参与。然后 我们在 bindscroll="bindscrolltolower"中直接这样写。首先 我们要给自己的scroll-view加一个id 方便我们去那这块元素。所以 我们只能寄希望于 bindscroll。但是 总有不太一样的情况。
解决微信小程序组件scroll-view中bindscrolltolower事件触发不了的问题
热门推荐
keji_123的博客
03-28 5万+
微信小程序学习了有一段时间了，在学习的过程中遇到了很多的问题。今天我就来和大家分享一下我在使用scroll-view组件时遇到的关于bindscrolltolower事件触发不了的问题。 scroll-view是微信小程序中的一个视图容器组件，用来显示可滚动的视图区域。例如下图这个电影预告的小程序，当把滚动条拖动到最底部时，可以触发一个scrolltolower事件，运行后续的功能。 可是...
小程序中使用bindscrolltolower下拉加载有时候不触发
m0_52517046的博客
05-05 1744
在容器内向下滚动内容至底部的时候，偶尔会出现不触发bindscrolltolower事件 还是可以触发但是 必须先下滑再上拉才能触发 原因： 应该是因为安卓手机下拉滑动到底部时，系统监听到距离底部的距离通常大于50，所以不能触发相应的函数；而小程序默认下拉离底部50px时触发函数（ios没有这种情况） 目前解决方法： 可以通过官网给出的属性让他在滑动到底部之前执行加载 将lower-threshold设置成200 <scroll-view scroll-y bindscrolltol
微信小程序scroll-view的bindscrolltolower事件不生效
Chocolate的博客
06-26 1320
最近学习微信小程序，用到了scroll-view控件，发现bindscrolltolower事件总是不能触发，修改后可正常触发了，注意下面几点。
微信小程序 可滚动视图 scroll-view 中绑定bindscrolltolower，bindscrolltoupper 无效的问题处理
andy5520的博客
10-17 2751
<view class="data-view-view"> <scroll-view class="scroll" scroll-top='{{scrollTop}}' bindscroll="scroll" scroll-y="true" lower-threshold="0" style="height:{{scrollHeight}}px;" bind...
小程序bindscrolltolower上拉加载更多快速划到底不触发解决
weixin_43818835的博客
12-09 3080
scroll-view在Android下快速上拉触底后不触发bindscrolltolower~ bug问题描述： 在安卓环境下，列表快速上拉进行滚动加载更多，会出现卡在低端 不进行加载现象，需要在卡住的位置重新下拉一小段距离再重新上拉加载 才可以加载出数据。（慢速上拉是可以正常加载更多数据）。 问题分析： 在父级、子级高度都设置正常的情况下，也就是需要固定的height值固定，需要给height...
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
10-17
本文通过实例代码给大家介绍了微信小程序使用scroll-view标签实现自动滑动到底部功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)
06-19
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信...
微信小程序scroll-view实现字幕滚动
10-18
主要为大家详细介绍了微信小程序scroll-view实现字幕滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现用户手机号授权
qq_45569925的博客
04-29 573
本文的代码只提供了前端代码部分，后端接口部分没有进行提供。以上代码只是我的个人写法，如有不足之处，欢迎批评指正！以下代码均使用uniapp进行实现。
java连锁美业收银系统源码-美业SaaS系统【微信小程序端】功能及应用场景介绍
最新发布
Boyi_meiye的博客
04-29 418
多门店管理 / 会员管理 / 预约管理 / 排班管理 / 商品管理 / 促销活动。2、 朋友都说小陈的服务和技术都很好， 我想预约她明天下午帮我做个护理。1、 网上的护肤文章或节目好多好杂， 想找一下一些贴近生活的护肤常识。4、 最近在博弈美业买的补水很好用， 但我忘记名字了， 想查一下订单。2、 没来过这家博弈美业， 想查一下哪个皮肤管理师的水平比较高。3、 我想给最近帮我服务的小陈一个好评， 不知道去哪里给她评价。1、 我想找一下附近的博弈美业， 看哪个门店评价比较好。连锁多门店美业收银系统源码。
从0开始学习制作一个微信小程序 学习部分（2）json文件的说明与app.json文件的操作
m0_74475812的博客
04-27 1194
本文是小程序制作系列的学习篇的第二篇 学习篇第一篇我们讲了编译器下载，项目、环境建立、文件说明与简单操作：[第一篇链接](https://blog.csdn.net/m0_74475812/article/details/138244488) 本篇将继续讲解一些基础的编码，分析json文件的作用,着重讲解app.json里可以对小程序进行的切换页面，改变图标等操作。
微信小程序与web-view网页进行通信的尝试
半吊子伯爵的博客
04-29 966
首先，微信小程序向web-view传递数据一般通过地址栏传参的形式（给src赋值或者修改hash），这样一般就已经能够满足实际开发需求了，所以这里主要探讨web-view向微信小程序传参。
基于微信小程序的旅游系统的设计与实现
No_Name_Cao_Ni_Mei的博客
04-28 782
本论文针对基于微信小程序的旅游系统的设计与实现展开研究。随着微信小程序的普及和用户的不断增加，基于微信小程序的旅游系统应运而生。本文以用户需求为出发点，设计了一套完整的旅游系统，实现了用户信息管理、线路推荐、预订和支付等功能。在设计阶段，采用了基于微信小程序开发框架的技术，并结合云开发平台，实现了系统的高效运行和数据的存储与管理。通过对用户的需求调研和用户体验测试，验证了系统的可行性和用户友好性。同时，对系统的性能进行了优化和改进，提高了系统的响应速度和稳定性。
微信小程序scrollview循环滚动
12-16
微信小程序中的scroll-view组件是用来实现滚动视图的，但默认情况下并不支持循环滚动。如果需要实现循环滚动，我们可以通过一些自定义的方式来实现。 实现循环滚动的基本思路是在scroll-view组件外面放置一个容器，并在容器中复制一份完整的内容，并且在容器的开始和结束处分别添加一份内容的副本。通过设置容器的宽度为原始内容的宽度加上一份内容的副本的宽度，来实现循环滚动的效果。 具体实现的步骤如下： 1. 在scroll-view组件外部添加一个容器，例如使用view组件包裹scroll-view组件。 2. 获取原始内容的宽度，可以使用小程序的API来获取元素的宽度，如wx.createSelectorQuery().select('#id').boundingClientRect() 3. 复制一份完整的内容，并在容器的开始和结束处分别添加一份内容的副本。 4. 设置容器的宽度为原始内容的宽度加上一份内容的副本的宽度。 5. 在scroll-view组件的bindscroll事件中，通过监听滚动的偏移量，当滚动偏移量超过容器的宽度时，将scroll-view的滚动到对应的位置，并且将滚动偏移量重置为0，实现循环滚动的效果。 需要注意的是，滚动的速度要快于内容的切换，否则会出现内容错乱的情况。同时，由于scroll-view组件在滚动到边缘时会有一定的滚动回弹效果，所以在滚动到容器的开始和结束处时会有一小段回弹效果，可以根据具体的需求进行调整和优化。 总结起来，通过在scroll-view组件外部添加一个容器，在容器中复制一份完整的内容并设置容器的宽度，以及通过监听滚动事件来实现滚动偏移量的调整，就可以实现微信小程序中scroll-view的循环滚动效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值