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

最新推荐文章于 2023-06-26 10:40:38 发布
原创 最新推荐文章于 2023-06-26 10:40:38 发布 · 2.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序

在微信小程序中，ScrollView的bindscrolltolower事件有时无法正常触发。为确保其工作，需确保page样式设置为100vh，并且ScrollView也要设置为100vh。这两个条件缺一不可，正确设置后可以避免bindscrolltolower不生效的状况。

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

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

page{
 height:100vh
}

2.scrollView设置成100vh

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

微信小程序开发中的数据分页和加载更多
m0_75244442的博客
07-24 396
准备工作 首先，在微信开发者工具中创建一个新的小程序项目。在项目目录下，创建四个文件：index.wxml、index.wxss、index.js和index.json。在实际项目中，可以根据服务器接口定义数据的获取方式，注意处理异常情况，例如网络错误等。微信小程序开发中，数据分页和加载更多是一个常见的需求，它可以提升用户体验，避免一次性加载大量的数据，同时也可以减少服务器压力。下面是一个关于数据分页和加载更多的代码案例。这里使用一个scroll-view组件来展示数据，并添加一个加载更多的按钮。
微信小程序事件 （例如滚动底部事件 bindscrolltolower）
s3248149993的博客
10-12 1008
这些事件可以用于实现各种滚动相关的交互效果，例如加载更多内容、下拉刷新等‌。日期: {{dates}}一、<scroll-view> 组件。// 点击日期组件确定事件。
微信小程序 可滚动视图 scroll-view 中绑定bindscrolltolower，bindscrolltoupper 无效的问题处理
andy5520的博客
10-17 3102
<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...
微信小程序scroll-view bindscrolltoupper & bindscrolltolower 上滑下拉不触发事件
oCaiWen的博客
06-12 1031
<scroll-view wx:if="{{shujiaData}}" class="swiper-scroll" scroll-y="true" bindscrolltoupper="scrolltoupperb" bindscrolltolower="scrolltolowerb"> <view class="shujia"> <block wx:for="{{shujiaData}}" wx:key="unique" wx:for-index="i" wx:f
微信小程序scroll-view的bindscrolltolower事件不生效
Chocolate的博客
06-26 2054
最近学习微信小程序，用到了scroll-view控件，发现bindscrolltolower事件总是不能触发，修改后可正常触发了，注意下面几点。
小程序bindscrolltolower上拉加载更多快速划到底不触发解决
weixin_43818835的博客
12-09 4123
scroll-view在Android下快速上拉触底后不触发bindscrolltolower~ bug问题描述： 在安卓环境下，列表快速上拉进行滚动加载更多，会出现卡在低端 不进行加载现象，需要在卡住的位置重新下拉一小段距离再重新上拉加载 才可以加载出数据。（慢速上拉是可以正常加载更多数据）。 问题分析： 在父级、子级高度都设置正常的情况下，也就是需要固定的height值固定，需要给height...
精选资源
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
今日准备把微信小程序的下拉刷新做一下，没想到我绑定了bindscrolltolower事件，但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我...
微信小程序scroll-view内使用bindscrolltolower实现上拉加载事件
weixin_42157001的博客
09-11 2373
刚开始的时候使用的是小程序自带的 onReachBottom 上拉触底事件内做的数据上拉加载请求，但是测试的时候触底事件内定义的方法并没有触发，忽然想到是不是 scroll-view 组件内实现页面上拉并不能触发 onReachBottom ，意思也就是， scroll-view 组件跟小程序自带的 onReachBottom 事件不能共同使用， 看了官方文档注意到 scroll-view 组件...
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
在微信小程序开发中，`scroll-view`组件是一个非常重要的元素，它允许用户在内容超过屏幕范围时进行滚动浏览。在本教程中，我们将探讨如何在`scroll-view`中实现下拉刷新（Pull-to-Refresh）功能，同时提供一个具体...
小程序中使用bindscrolltolower下拉加载有时候不触发
m0_52517046的博客
05-05 2247
在容器内向下滚动内容至底部的时候，偶尔会出现不触发bindscrolltolower事件 还是可以触发但是 必须先下滑再上拉才能触发 原因： 应该是因为安卓手机下拉滑动到底部时，系统监听到距离底部的距离通常大于50，所以不能触发相应的函数；而小程序默认下拉离底部50px时触发函数（ios没有这种情况） 目前解决方法： 可以通过官网给出的属性让他在滑动到底部之前执行加载 将lower-threshold设置成200 <scroll-view scroll-y bindscrolltol
微信小程序中 scroll-view 属性 bindscrolltolower 事件触发不生效
徐同泽的博客
01-15 1万+
最近做公司微信小程序的项目时 遇到的问题 记录一下文帝防止日后出现相同的错误 问题所在：处理滚动到底部 触发滚动到底部事件 (bindscrolltolower) 的时候 并没有 生效！ 经过多方面的资料排查，以及官方文档的查询 终于解决了 本人的困惑 &lt;scroll-view class='pages-container' scroll-y="true" ...
微信小程序—bindscrolltolower不起作用的解决办法
Poppy_LYT的博客
08-20 3639
微信小程序—bindscrolltolower不起作用的解决办法 必须给scroll-view设置高度，不然无法触发
解决微信小程序组件scroll-view中bindscrolltolower事件触发不了的问题
mandy' blog
07-20 3890
小程序scroll-view中的bindscrolltolower方法失效的原因是， 为这个scroll-view以及page的高度都设置为100vh; 需要在app.wxss中设置 page{ height：100vh } 并且在有scroll-view的view中设置height：100vh 即可、...
微信小程序之scroll-view布局及bindscrolltolower事件不触发的问题
weixin_30405421的博客
07-21 2998
布局问题 小程序中为了可滚动视图区域要得使用scroll-view，但scroll-view有致命的缺陷，就是不支持flex布局。但我们可以通过使用scroll-view来包裹view的方法来使用flex布局. scroll-view来包裹view的方法来使用flex布局 wxml部分 <scroll-view class="grid-container-e" ...
小程序scroll-view快速滑动不会触发bindscrolltolower(偶现)
weixin_44969815的博客
01-09 2445
wepy小程序开发 最近偶现出一个bug 因为做的是上拉加载的功能 用到了scroll-view的几个方法 scrolltolower和lower-threshold 项目的一些代码 <scroll-view scroll-y @scrolltolower="scrollList" lower-threshold="{{30}}" ...
微信小程序scroll-view bindscrolltoupper & bindscrolltolower不响应的问题
热门推荐
戒骄戒躁，自强不息
01-19 2万+
scroll-view 微信小程序
小程序bindscrolltolower失效
Dev_Hanyu的专栏
05-15 8389
小程序scroll-view中的bindscrolltolower方法失效的原因是，需要在app.wxss中设置page{    height：100%}并且在有scroll-view的view中设置height：100%即可生效
微信小程序 滚动列表
最新发布
01-28
### 微信小程序实现滚动列表方法 在微信小程序中，`scroll-view` 是用于创建可滚动区域的关键组件[^2]。通过设置 `scroll-x` 或者 `scroll-y` 属性来控制水平或垂直方向上的滚动行为。 #### scroll-view 基本属性配置 为了使列表能够正常滚动，需合理设定 `scroll-view` 的宽高样式以及启用相应的滚动轴： ```html <scroll-view class="scrollView" scroll-y> <!-- 列表项 --> </scroll-view> ``` 对于高度自适应的情况，可以通过绑定页面计算后的变量给定具体的像素值[^3]: ```html <!-- WXML 文件片段 --> <scroll-view class="scrollView" scroll-y style="height: {{scrollHeight}}px;"> <!-- 列表内容 --> </scroll-view> // JS文件内定义data中的scrollHeight字段，并在其生命周期函数里初始化该数值 Page({ data:{ scrollHeight: '' }, onLoad:function(){ this.setScrollViewHeight(); }, setScrollViewHeight() { const query = wx.createSelectorQuery() let that = this; query.select('.container').boundingClientRect(function (rect){ if(rect!=null){ that.setData({scrollHeight: rect.height}); } }).exec() } }) ``` 当涉及到更复杂的交互逻辑比如懒加载更多数据时，则可以在监听滚动事件的同时判断是否接近底部从而触发新的网络请求。 #### 滚动到底部自动加载更多案例 ```javascript pageScrollToLower(e) { console.log('到达底部'); // 这里可以发起下一页的数据请求... } ``` 配合上述代码，在WXML模板中加入如下监听器即可生效: ```html <scroll-view bindscrolltolower="pageScrollToLower"> ... </scroll-view> ``` 以上就是有关于如何利用官方提供的API构建一个基本的滚动列表解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值