小程序上拉加载和下拉刷新

本文详细解析了微信小程序中上拉加载和下拉刷新的实现方式,包括原生事件onReachBottom和onPullDownRefresh的使用注意事项,以及scroll-view组件的具体配置方法,确保开发者能正确应用这些功能提升用户体验。
摘要由CSDN通过智能技术生成

微信开发文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

一、如果使用原生的onReachBottom(上拉加载)和onPullDownRefresh(下拉刷新),需要注意

1.在xxx.json页面不添加"onReachBottomDistance":xxx,默认下拉50(单位px)触发onReachBottom事件。

注意:如果页面未出滚动条,设置高度需要大于100%

2..在xxx.json页面不添加"enablePullDownRefresh":true,不会触发onPullDownRefresh下拉事件。

注意,如果是使用MAC OS 操作系统进行开发,要触发onPullDownRefresh事件,需要点住进行下拉,而不是滑动下拉。

二、如果使用scroll-view

格式如下:

<scroll-view scroll-y="true" lower-threshold="100"

bindscrolltolower="lower" bindscrolltoupper="upper" upper-threshold="10">

    <view></view>

</scroll-view>

重点(横向加载/刷新同理):

           1.保证page的height:100%;

           2.保证scroll-view的height:100%;

           3.保证scroll-view下面的样式的height总和>100%;(这个demo可以让view的height:101%;试一下)

如有问题,欢迎大家留言指正,谢谢!!~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值