scroll-view 下滑列表加载的使用

已于 2022-03-25 16:57:20 修改
阅读量664 收藏
点赞数
文章标签： 微信小程序 uni-app
于 2022-03-25 10:50:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nba136667854/article/details/123729566
版权

项目场景：

uni-app小程序有多个场景使用列表展示分页数据，需要封装一个监听滚动页面监听的组件

问题描述

用什么方法触发组件页面滚动监听；

scroll-view的scroll滚动事件没触发；

解决方案：

onPageScroll 是页面周期函数，自定义组件内无法使用；

scroll-view的scrolltolower触发需要两个条件 1给定高度 2滚动事件的方向 比如scroll-y

当滑动到元素的底部会触发scrolltolower

nba136667854
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序 scroll-view的使用案例代码详解
10-15
主要介绍了微信小程序 scroll-view的使用案例分析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
03-29
如图，使用小程序的scroll-view实现的上拉加载数据，下拉刷新数据，试下代码如下： js文件代码：   var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = ...
微信小程序scroll-view动态加载数据滚动指定位置
最新发布
m0_63007736的博客
08-29 1942
【代码】微信小程序scroll-view动态加载数据滚动指定位置。
uniapp scroll-view滑到底部加载更多数据
Mybabyying的博客
07-13 3128
进入页面加载完请求第一页数据（onLoad）或者切入前台请求（onShow），根据需求修改，我这里是onLoad。必须设置下面两个属性。
uniapp利用scroll-view实现滚动触底加载
cautionHua的博客
07-05 3021
微信小程序官方在scroll-view中也提供了一种触底加载的方式，也没有我写的这么复杂，在uniapp中要改写成vue的方式。可以使用以下这种方式来做滚动触底加载，但是官网提示长列表性能不太好，目前也没有更好的方式，暂时先这么处理。才能生效，两个方式各有优劣，选择适合自己的就行了。
scroll-view组件上拉加载多次触发scrolltolower事件
jumpdo的博客
10-22 7144
出现这个情况的原因是scroll-view组件有个lower-threshold属性（默认50），当你上拉加载的时候除非你碰到底部不然你在0~50这个区间内滑动的话会一直触发scrolltolower事件。 解决方法就是设置一个开关，当开关为false时直接return。触发scrolltolower事件时把开关设置为false，而且只有开关为true时才会继续执行下面的操作，然后将开关设置为tr...
Uni-app在scroll-view中实现分页加载数据
qq_43713840的博客
04-16 1580
Uni-app在scroll-view中实现分页加载数据
微信小程序scroll-view组件实现滚动动画
12-29
本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果，供大家参考，具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位； 利用scroll-view的scroll-with-animation属性实现...
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： <scroll xss=removed> asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj </scroll> 发现scroll-view内的一大...
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的...scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
微信小程序组件scroll-view滚动到底部多次触发加载如何解决？
超人不会飞
05-23 2064
在 iOS 真机上，scroll-view 滚动时会多次触发 scrolltolower 事件的问题，可以设置一个“加载标识”（如 DisableTrigger）来避免重复请求下一页数据。在 onreachBottom 方法中，判断 DisableTrigger 是否为 true，如果是，则执行下一页数据的加载，否则不做任何操作。在 init()方法中，在请求数据前将 DisableTrigger 设置为 false，表示当前正在加载数据。
scroll-view标签下滑抖动回弹
qq_54097544的博客
06-21 792
解决scroll-view下滑列表抖动回弹问题
使用scroll-view实现tabs（增加动画过渡效果）
richest_qi的博客
07-13 1011
可实现一个可滚动的视图区域。 组件有很多属性，常用的有：，显示loading提示框，调用才能关闭提示框。 接收一个对象作为参数，该对象包含如下属性：代码涉及的主要文件有：
微信小程序 - scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）
Qianmoer的博客
08-02 5515
/ 自己定义刷新事件 var self = this;// 自己定义刷新事件 self . setData({triggered : true , // 将triggered属性设置为true，表示下拉刷新已经被触发 }) wx . showToast({title : "刷新成功" }) setTimeout(function() {triggered : false , // 将triggered属性设置为false，表示下拉刷新已完成 }) console . log('下拉刷新已完成')
uniapp使用scroll-view组件实现下拉刷新跟上拉加载
weixin_39531049的博客
07-11 6129
以上就是uniapp 使用scroll-view上拉加载跟下拉刷新功能的实现方法。
微信小程序scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）
学如逆水行舟，不进则退！
07-12 6636
最近在学习微信小程序，有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能，遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题，网上很多说给scroll-view设置一个高度啥的就可以解决，有些人设置了高度也不触发，所以在下就研究了一波这个scroll-view的触发机制。
微信小程序 scroll-view 如何实现滚动下拉
sinat_33255495的博客
08-18 3223
在小程序开发过程中，经常会遇到列表滚动加载的效果。当整个页面需要滚动下拉的时候，我们可以借助小程序的生命周期函数 onReachBottom。但是当需要滚动下拉的内容为页面的一部分时，就需要用到 scroll-view 组件了。 在 scroll-view 中有一个函数 bindscrolltolower，会在滚动到底部/右边时触发。 实现原理： 设置一个请求发送的开关，当返回的数据小于设置的每页条数时，关闭请求。 具体实现方法如下： wxml: <scroll-view scroll-y="{{tr
小程序scroll-view实现三级分类左右联动，上拉加载以及下拉刷新
qq_44828153的博客
12-05 2727
lower-threshold = ‘-50’,这里很坑，模拟器和安卓不行，ios可以，在滚动条触底的时候，ios可以继续往上拉一段距离，此时会来到下一页，无法兼容安卓， 2. 滑动三级分类，二级分类跟着滚动有两种方式,scroll-into-view锚点和scroll-left scroll-into-view锚点,前提得给商品列表每个子选项 一个唯一class，三级分类上下滑动，监听高度变化，拿到当前索引，动态改变二级分类的class名 注意：设置横向滚动需要确定scroll-x的宽度，如果发现不
uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载
热门推荐
weixin_43973909的博客
02-17 1万+
uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载
微信小程序scroll-view下滑加载代码
05-26
下面是一个简单的微信小程序scroll-view下滑加载的代码示例： 1. 在wxml文件中添加scroll-view组件： ``` <scroll-view scroll-y="true" bindscrolltolower="loadMoreData"> <view wx:for="{{list}}" wx:key="{{...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nba136667854

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值