微信小程序中scroll-view里获取触底事件

最新推荐文章于 2024-10-12 14:14:15 发布
原创 最新推荐文章于 2024-10-12 14:14:15 发布 · 1.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #javascript #前端

在微信小程序中，可以通过在<scroll-view>组件上绑定bindscrolltolower事件来监听触底事件。当用户滚动到组件底部时，执行onScrollToLower方法。此方法内部使用wx.createSelectorQuery获取滚动视图的高度，判断滚动位置是否达到底部，从而实现触底加载更多数据的功能。

如果想在滚动组件中拿到触底事件需要自己去获取组件,通过bindscrolltolower事件来定义onScrollToLower方法

<scroll-view  bindscrolltolower="onScrollToLower"  class="my-scroll-view"  scroll-y="true" style="height: 100vh;">
        <view class="pge">
最低0.47元/天 解锁文章
半开半落
关注
微信小程序触底加载scroll-view
共同进步
06-19 9276
微信小程序触底加载scroll-view 需求：有个固定高度的容器，实现容器里面的内容触底加载1、内容盒子的高度2、盒子里内容的总高度3、滚动条的scrollTop触底加载的原理就是 当里面的容器触底的时候进行分页，请求接口合并数据公式盒子的高度+滚动条的scrollTop = 内容高度使用原生的计算方法比较麻烦 因此市面上有很多关于触底加载的插件我们这里使用的是 uni-app 里面的。
微信小程序scroll-view内使用bindscrolltolower实现上拉加载事件
weixin_42157001的博客
09-11 2369
刚开始的时候使用的是小程序自带的 onReachBottom 上拉触底事件内做的数据上拉加载请求，但是测试的时候触底事件内定义的方法并没有触发，忽然想到是不是 scroll-view 组件内实现页面上拉并不能触发 onReachBottom ，意思也就是， scroll-view 组件跟小程序自带的 onReachBottom 事件不能共同使用， 看了官方文档注意到 scroll-view 组件...
微信小程序事件 （例如滚动底部事件 bindscrolltolower）
最新发布
s3248149993的博客
10-12 993
这些事件可以用于实现各种滚动相关的交互效果，例如加载更多内容、下拉刷新等‌。日期: {{dates}}一、<scroll-view> 组件。// 点击日期组件确定事件。
scroll-view的滚动触底事件
LlanyW的专栏
08-07 1343
需要固定一个高度，指定滚动方向 ：scroll-y style="height:{{windowHeight-nav_height}}px;bindscrolltolower="nextPage" ，已经加了触底事件了，但是怎么都触发不了。其他原因：第一个分页数据过少的情况下，也可能因为没有填充满当前高度导致无法触发，这个触底事件。
小程序scroll-view滑动触底
明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。 但愿人长久，千里共婵娟。
03-15 4925
需求：当我们浏览到屏幕末尾时，加载出下一页的内容。 小程序scroll-view文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 注意实现细节： 1、 由于采用的是scroll-view 来实现，因此需要竖向滚动，那么scroll-y 属性的值就必须要设置成 true ,而且scrol...
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
今日准备把微信小程序的下拉刷新做一下，没想到我绑定了bindscrolltolower事件，但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我...
微信小程序scroll-view组件实现滚动动画
12-29
本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果，供大家参考，具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位； 利用scroll-view的scroll-with-animation属性实现...
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
在微信小程序中，我们可以使用`scroll-view`的`bindscroll`事件来监听滚动过程，并结合`wx.startPullDownRefresh`和`wx.stopPullDownRefresh`方法来实现这一功能。 1. **开启下拉刷新**： 在`app.json`或页面配置...
小程序和uniapp中scroll-view触底加载
qq_43235503的博客
09-17 745
触顶加载：scrolltoupper事件；触底加载：scrolltolower事件；
uniapp中使用scroll-view实现后台数据的触底加载
GlowwormComrade的博客
05-31 1065
scroll-view触底加载。
＜scroll-view＞标签滑动到底部触发bindscrolltolower事件
Tom_yangyang的博客
07-10 731
在js界面中只需要写一个downhint:function() {}，在其中写入一个wx.showToast({})弹窗API,将提示文字写在API的title: '已到底啦！注意title: ''中的提示文字不得超过七个字符。在<scroll-view>标签中添加bindscrolltolower="downhint"属性，这个bindscrolltolower属性的作用是当滑块滑到最底部，没有内容的时候生效的一个滑动事件。
微信小程序组件scroll-view滚动到底部多次触发加载如何解决？
超人不会飞
05-23 2989
在 iOS 真机上，scroll-view 滚动时会多次触发 scrolltolower 事件的问题，可以设置一个“加载标识”（如 DisableTrigger）来避免重复请求下一页数据。在 onreachBottom 方法中，判断 DisableTrigger 是否为 true，如果是，则执行下一页数据的加载，否则不做任何操作。在 init()方法中，在请求数据前将 DisableTrigger 设置为 false，表示当前正在加载数据。
android scrollview 判断触底
a5130094的博客
09-26 392
1 private int index = 0; 2 // 滑动加载 3 scrollView.setOnTouchListener(new OnTouchListener() { 4 5 @Override 6 public boolean onTouch(View v, M...
uniapp利用scroll-view实现滚动触底加载
cautionHua的博客
07-05 3518
微信小程序官方在scroll-view中也提供了一种触底加载的方式，也没有我写的这么复杂，在uniapp中要改写成vue的方式。可以使用以下这种方式来做滚动触底加载，但是官网提示长列表性能不太好，目前也没有更好的方式，暂时先这么处理。才能生效，两个方式各有优劣，选择适合自己的就行了。
小程序scroll-view，滚动到最低_小程序滚动到底部
天马3798
04-25 4349
小程序scroll-view，滚动到最低_小程序滚动到底部 小程序滚动条，滚到最底部解决方案1 小程序滚动到底部使用Scorll-view实现方案: scrill-view：组件要固定高度。 scroll-y:true scroll-top="{{scrollTop}}" scroll-with-animation="true" 每次加载新的数据修改一下scroll-top的值即可。 css代码： .list { border: 1px solid red; padding: 1
小程序基本命令
aiven1637的博客
10-30 3472
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序上拉触底事件
m0_62508027的博客
09-09 2551
微信下拉触底事件案例
微信小程序中 scroll-view 属性 bindscrolltolower 事件触发不生效
热门推荐
徐同泽的博客
01-15 1万+
最近做公司微信小程序的项目时 遇到的问题 记录一下文帝防止日后出现相同的错误 问题所在：处理滚动到底部 触发滚动到底部事件 (bindscrolltolower) 的时候 并没有 生效！ 经过多方面的资料排查，以及官方文档的查询 终于解决了 本人的困惑 &lt;scroll-view class='pages-container' scroll-y="true" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值