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

最新推荐文章于 2024-08-07 20:23:38 发布

原创

最新推荐文章于 2024-08-07 20:23:38 发布 · 1.9k 阅读

3 ·

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元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

半开半落

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序触底加载scroll-view

共同进步

06-19

9276

微信小程序触底加载scroll-view 需求：有个固定高度的容器，实现容器里面的内容触底加载1、内容盒子的高度2、盒子里内容的总高度3、滚动条的scrollTop触底加载的原理就是当里面的容器触底的时候进行分页，请求接口合并数据公式盒子的高度+滚动条的scrollTop = 内容高度使用原生的计算方法比较麻烦因此市面上有很多关于触底加载的插件我们这里使用的是 uni-app 里面的。

uniapp中使用scroll-view实现后台数据的触底加载

GlowwormComrade的博客

05-31

1065

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...

小程序和uniapp中scroll-view触底加载

qq_43235503的博客

09-17

745

触顶加载：scrolltoupper事件；触底加载：scrolltolower事件；

精选资源

微信小程序 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`或页面配置...

＜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

2990

在 iOS 真机上，scroll-view 滚动时会多次触发 scrolltolower 事件的问题，可以设置一个“加载标识”（如 DisableTrigger）来避免重复请求下一页数据。在 onreachBottom 方法中，判断 DisableTrigger 是否为 true，如果是，则执行下一页数据的加载，否则不做任何操作。在 init()方法中，在请求数据前将 DisableTrigger 设置为 false，表示当前正在加载数据。

android scrollview 判断触底

a5130094的博客

09-26

393

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

3519

微信小程序官方在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 事件触发不生效