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

已于 2022-03-25 16:57:20 修改
阅读量698 收藏
点赞数
文章标签： 微信小程序 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
关注
微信小程序，使用scroll-view实现下拉加载更多（下一页）源码
08-05
微信小程序，使用scroll-view实现下拉加载更多（下一页）源码。 可查看文章:http://blog.csdn.net/dKnightL/article/details/76724205
（七）scroll-view 下拉加载
Luckyzhoufangbing的博客
08-15 937
html: <view> <!-- 下拉加载 1. lower-threshold 距底部触发的阀值 2. bindscrolltolower 触发函数 --> <view class="box"> <scroll-view class="wrapper" scroll-y lower-threshold="{{ 20 }}" bindscrolltolower="s.
uni-app 使用scroll-view实现页面列表滚动加载（简单实现）
jjbao的博客
01-12 1846
uni-app 使用scroll-view实现页面列表滚动加载（简单实现）
微信小程序scroll-view动态加载数据滚动指定位置
m0_63007736的博客
08-29 2317
【代码】微信小程序scroll-view动态加载数据滚动指定位置。
微信小程序-scroll-view实现上拉加载和下拉刷新
最新发布
weixin_42284031的博客
06-20 1495
scroll-view组件通过自身一些属性实现上拉加载的功能。lower-threshold=“100"属性表示距离底部多少px就会实现触发下拉加载的事件。类似于在.json文件里面配置"onReachBottomDistance”: 100bindscrolltolower="getMore"属性是监听下拉加载的所绑定的方法。enable-back-to-top属性设置为ture表示点击状态栏或者标题栏回到顶部位置。
微信小程序做下滑加载使用 scroll-view （uniapp和微信小程序）
weixin_44291886的博客
06-11 601
使用scroll-view做下滑加载更多内容用scroll-view做下滑加载 所必须用到的scroll-view的属性 1.scroll-y 2.scrolltoupper 用scroll-view做下滑加载 所必须用到的scroll-view的属性 1.scroll-y 2.scrolltoupper //scrolltoupper 为下滑到底部的时候所触碰的事件 当更新页面的时候需要这个属性 <template> <scroll-view :style="{ height: scr
小程序 scroll-view下拉加载跳到底部优化
darui_lili的博客
10-24 532
小程序scroll-view下拉加载无法控制scroll-top时候展示优化
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
10-17
这样，当页面加载时，`scrollTop` 会被设置为列表总高度，使 `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="{{...
uniapp使用scroll-view下拉刷新无法取消的坑
haosicx的博客
09-16 2823
在做uniapp的时候需要用到tap页 但是uView的基础tap页是不支持左右滑动的 所以使用了tap-swiper组件 但是这个组件必须包裹一个scroll-view 包裹后uniapp自带的下拉刷新就没了 必须使用scroll-view自带的下拉刷新才行 但是做的时候出现了一个问题 scroll-view自带的下拉刷新 刷新后无法取消那个动画 我在网上也找了很多 都没有找到一个好的解决方案 后来就自己搞出来了 虽然性能不太好 但是还是可以用的 思路如下 仅供参考 .
uniapp使用 scroll-view 进行触底加载列表
F2601775592的博客
12-05 1380
这列需要设置高度，一开始我没有设置高度 触底没有作用。1.template部分。2.script部分。
微信小程序开发系列（三十三）·如何通过scroll-view实现上拉加载和下拉刷新
时光の尘的博客
03-17 4948
当用户下拉刷新时，会触发名为 refreshHandler 的处理函数来执行相应的逻辑，比如加载最新数据或者其他操作。当 refresher-triggered 的值为 true 时，表示下拉刷新已经被触发，可以执行相应的刷新操作。当滚动视图滚动到设定的阈值（由 lower-threshold 决定）时，触发触底事件，然后会调用名为 getMore 的处理函数来执行相应的逻辑。在滚动视图中，当距离底部的距离小于或等于 lower-threshold 设置的值时，会触发触底事件。
scroll-view组件上拉加载多次触发scrolltolower事件
jumpdo的博客
10-22 7402
出现这个情况的原因是scroll-view组件有个lower-threshold属性（默认50），当你上拉加载的时候除非你碰到底部不然你在0~50这个区间内滑动的话会一直触发scrolltolower事件。 解决方法就是设置一个开关，当开关为false时直接return。触发scrolltolower事件时把开关设置为false，而且只有开关为true时才会继续执行下面的操作，然后将开关设置为tr...
Uni-app 订单页 下拉加载更多
weixin_60463255的博客
01-11 1658
订单页面 下拉加载逻辑： 1.给每个Tab绑定滑动触底事件reachBottom(currentIndex)，传入了currentIndex。在函数内判断：为哪个index，并且对应数组比如orderTotal > this.orderList.length，这就说明可以加载更多，就==》pageNum++；并调用查询订单的接口this.__init()。 2.接口返回200后有个判断：若pageNum=1，将请求到的list直接赋值；若pageNum>1，就用p...
uniapp上拉刷新，下拉加载
weixin_42066070的博客
10-09 416
设置相应的界面 "enablePullDownRefresh": true,
小程序Scroll-view上拉滚动刷新数据
Rechal_Mei的博客
01-05 3429
小程序Scroll-view上拉滚动刷新数据 因为项目需求，我需要做一个上拉刷新，但是我不是小程序的原生刷新生命周期函数事件 小程序scroll-view，有一个滚到底部触发事件bindscrolltolower加粗样式 把自己需要滚动的内容放在这个scroll-view之间，然后。给scroll-view一个滚动高度 首先先看一下效果图吧 order.wxml页面 &lt;scroll-...
【uniapp】实现列表分页加载数据列表的方法，通过scroll-view下拉刷新，上拉加载的方法即可
weixin_50450473的博客
12-14 9521
1、通过上拉触底事件，累加下一页分页的数据到列表最后，并显示加载的效果2、再判断总页数是否已经累加完成，如果已完成，则提示 “没有数据了”
uniapp 实现 下拉分页加载数据
陈怂怂的博客
02-26 8509
uniapp 实现 下拉分页加载数据 使用场景大多在列表页中，那么如何实现呢？ 正式开始之前先介绍两个函数： onPullDownRefresh 在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

nba136667854

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

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

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

打赏作者

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

抵扣说明：

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

余额充值