微信小程序中使用scroll-view控件实现上拉加载更多遇到的坑

最新推荐文章于 2024-05-16 16:15:50 发布
最新推荐文章于 2024-05-16 16:15:50 发布
阅读量1w 收藏 4
点赞数 1
分类专栏： 小程序开发之控件问题 文章标签： 小程序scroll-view控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010882634/article/details/78622367
版权
前段时间因公司需求开始学习并开发小程序。做到上拉加载功能的时候遇到小程序的一个坑，以下做个记录避免后人踩坑。
实现小程序上拉加载有两种方式：1.在page页面的 onReachBottom()方法中写上拉加载的逻辑  2.给scroll-view控件设置高度后，设置scroll-view的bindscrolltolower
属性，在回调方法中写上拉加载逻辑。我用的第二种方式，但是在上拉加载的时候出现重发加载数据的问题，找了好久才知道，scroll-view控件有个属性
lower-threshold 距离底部多远的时候执行回调，这个属性的值越大越容易造成重复多次加载，所以建议小伙伴们在使用的时候，将这个属性的值设置为 0 或者 1 等很小的值，避免重复加载

u010882634
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序下拉刷新真机没效果_微信小程序下拉刷新上拉加载的两种实现方法...
weixin_39994665的博客
12-22 815
微信小程序下拉刷新上拉加载的两种实现方法，1、利用"onPullDownRefresh"和"onReachBottom"方法实现小程序下拉刷新上拉加载，2、在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上拉加载。利用"onPullDownRefresh"和"onReachBottom"方法在js文件里直接写"onPullD...
微信小程序 scroll-view 完成上拉加载更多
huan的学习记录
06-29 5534
我们经常在软件客户端上看到这么一个功能，当我们阅读信息浏览到文章的末尾时，通常会加载出更多的信息。比如，我们在简书客户端上浏览推荐文章时，浏览到屏幕的末尾，此时又加载出了另一页的推荐文章，即实现了上拉加载更多的功能。在小程序中，我们可以借助 scroll-view 来实现这个功能，当然也可以使用别的方法来实现。 需求： 当我们浏览到屏幕末尾时，加载出下一页的内容。 注意...
微信小程序踩坑之：scroll-view的上拉加载触发问题
qq_40942817的博客
11-30 1631
问题 之前写代码的时候，scroll-view标签内部的子标签，习惯写 margin 来保持上下两个盒子之间的间距，但是发现当scroll-view里面的内容高度，还没有它本身高的时候，还是能触发上拉加载事件，就很不明白。 解决方案 网上收到的答案是 margin 造成的，但是我又不想改成 padding ，所以我的答案是在scroll-view的里面再套一个子父级的view盒子，给个padding：1rpx；的样式，或者使用flex布局。就解决了这个问题。 <scroll-view > &l
微信小程序中使用scroll-view组件实现下拉刷新功能
最新发布
xiejunna的博客
05-16 536
微信小程序中使用scroll-view组件实现下拉刷新功能
微信小程序下拉刷新真机没效果_微信小程序 下拉刷新 上拉加载(示例代码)
weixin_39880328的博客
12-22 345
1.下拉刷新小程序页面集成了下拉功能，并提供了接口，我们只需要一些配置就可以拿到事件的回调。1. 需要在 .json 文件中配置。 如果配置在app.json文件中，那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中，那么就是对应的页面，可以下拉刷新。具体页面的.json文件：1 {2 "enablePullDownRefresh": true3 }app.json文件:1 "wind...
微信小程序scroll-view监听底部加载不执行的问题
hnnd123的博客
06-20 1164
问题代码： <scroll-view scroll-y="true" style="height: {{windowHeight}}px;" bindscrolltolower="onReachBottom"> <view> ......... </view> </scroll-view> 原因： scroll-view不能作为根元素，在外面包裹一层view即可。 <view> <scroll-view scroll-y="tru
微信小程序中使用scroll-view问题处理
weixin_43837268的博客
09-06 1192
如果启用了 scroll-x 却出现不滚动的现象，可以尝试给滚动容器添加两个样式 `white-space: nowrap;1. 启用 scroll-anchoring 属性时，同时添加一个 overflow-anchor:auto 的样式，用于解决 Android 机型不兼容的问题。6. 尽量不要在 JavaScript 里执行频繁更新视图的代码，可以把这种代码放在 WXS 模块中，在大列表视图中尤其要这么做。3. 使用 enable-flex 开启 scroll-view 的 flex 布局。
微信小程序scroll-view中的坑（因为动态设置高度导致无法下拉）
zhoulib__的博客
07-22 3514
微信小程序中使用scroll-view时，一般都是需要自行设置高度，因为不设置的话，显示的老小了，但是设置高度的话给一个定值也不合适，一般在移动端上面，界面通常是正好铺面当前的屏幕的大小， 代码 主要使用 calc这个计算 css 首先获取当前scroll-view组件在屏幕中位置 像这样 data: { top:'', }, let query = wx.createSelectorQuery() query.select('.scroll-view').boundingCl
小程序分页加载onReachBottom上拉触底加载--小程序走过的坑（6）（最新版）
热门推荐
zhanxingdong的博客
07-26 6万+
onReachBottom 小程序拥有页面上拉触底事件的处理函数onReachBottom 当上拉至底部时就会触发onReachBottom函数来进行相应动作。也就是说小程序自带能捕捉到用户触底事件的函数。我们无需再进行捕捉用户事件了！！！ 直接上代码 data: { limit: 11,//显示数据量 list: '', page: 1,//当前页 ...
微信小程序自动滚动加载数据之坑
吹泡泡的星星
11-13 4435
我的 scroll-view自动滚动，应该滚动到底部最后一个元素roll29, 但是滚动到roll21，其他的都被遮挡了。因为我是加载一天的历史记录，所以有可能一次性加载很多数据，这样自动刷新就存在问题了。
微信小程序采坑之上拉触底加载更多和下拉刷新
dk2319193的博客
05-03 714
小程序中加载更多数据一般都是触底刷新 有自带的函数： onReachBottom: function (){} 但是在使用时触发完全没有反应，后来尝试给外层加了一个高度，解决问题 仔细想想也是，没有设置高度，触底函数也不知道什么时候该触发 下拉刷新也有自带的函数 onPullDownRefresh: function () {} 但是使用前要在json页面配置 "e...
小程序实现下拉刷新和上拉加载更多
csdn姚宏波
04-26 2185
1.逻辑要点 下拉刷新逻辑： 下拉后发送网络请求，获取第一页数据 数据获取成功后清空本地数据 加载第一页数据 上拉加载更多： 根据当前页码和总页码进行比较，如果当前页码>=总页码，则不请求数据 每次请求，当前页码+1 发送网络请求，传递当前页码 响应中应该包含获取的数据以及总页码 获取成功后，将获取的数据与当前的数据进行连接 2. 后台接口编写 两者公用 一个后台接口，就...
微信小程序scroll-view下拉刷新与上拉加载更多
shi450561200的博客
12-09 2261
或者 overflow-y: scroll 否则scroll-view上的方法不起作用。
uniapp scroll-view滑到底部加载更多数据
Mybabyying的博客
07-13 3433
进入页面加载完请求第一页数据（onLoad）或者切入前台请求（onShow），根据需求修改，我这里是onLoad。必须设置下面两个属性。
微信小程序scroll-view重新加载数据，滚动条回到顶部
guairena的博客
05-05 4080
问题： 微信小程序切换了筛选条件后，列表滚动条没有滚动回顶部。 场景： wepy+原生 通过<scroll-view>实现列表滚动 方案： 1、通过wx:if设置列表元素的展示隐藏 通过给<scroll-view wx:if="{{flag}}"> 设置显示隐藏，去重新加载列表。直接设置无法生效，滚动条依旧保留在上次滚动的地方；加一个延迟，放在定时器里去setTimeout(() => { this.flag = true }, 100) 设置flag的值。目的是等到页面渲染完
uni-app微信小程序scrollView的scrolltolower无法触发上拉加载
R__Zoro的博客
05-07 769
uni-app微信小程序scrollView的scrolltolower无法触发上拉加载
微信小程序上拉多次加载问题（手指放在屏幕上一直向上拉就会不停的调用加载接口）
sdfujichao的博客
06-05 6331
问题描述：我们经用到上拉加载功能。官方文档上写的lower-threshold="0"，其实仅仅就是当上拉到底部的时候就调用接在接口，当滑到底部调用接口的时候我们继续上拉屏幕，结果就会出现一次上拉多次加载的问题。解决方法：我先说说思路，我就是利用bindtouchend事件，这个时间就是触摸结束时间，也就是触摸接触的时候会调用这个方法。所以我们在写完上拉加载功能后，在添加一个bindtouchen...
使用scroll-view实现tabs（增加动画过渡效果）
richest_qi的博客
07-13 1060
可实现一个可滚动的视图区域。 组件有很多属性，常用的有：，显示loading提示框，调用才能关闭提示框。 接收一个对象作为参数，该对象包含如下属性：代码涉及的主要文件有：
解决小程序scroll-view无法触发onReachBottom上拉触底事件
婳祎
10-18 2195
使用了scroll-view标签onReachBottom上拉触底不触发，可以在标签里面加上这个事件 bindscrolltolower事件。 bindscrolltolower eventhandle 否 滚动到底部/右边时触发 <scroll-view class="list" scrollY="true" bindscrolltolower="Reachbottom"></scroll-view> 然后在js中调用这个方法，在...
微信小程序使用scroll-view实现上拉加载，怎么用代码实现
04-22
对于微信小程序使用scroll-view实现上拉加载的问题，可以通过以下代码实现： 1. 在wxml文件中添加scroll-view组件，并设置属性 ``` <scroll-view scroll-y="{{true}}" style="height:{{winHeight}}rpx;" ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值