首页 > 上网技巧 > 电脑小技巧 > 微信小程序下拉刷新上拉加载的两种实现方法

微信小程序下拉刷新上拉加载的两种实现方法

时间:2019-08-16 17:37 作者:QQ地带 我要评论

微信小程序下拉刷新上拉加载的两种实现方法,1、利用"onPullDownRefresh"和"onReachBottom"方法实现小程序下拉刷新上拉加载,2、在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上拉加载。
 
 利用"onPullDownRefresh"和"onReachBottom"方法
在js文件里直接写"onPullDownRefresh"和"onReachBottom"方法即可;
 
文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161107
 
xml
 
<scroll-view scroll-y = true >
    .........
</scroll-view>
js
 
onPullDownRefresh: function() {
    // Do something when pull down.
     console.log('刷新');
 },
 
 onReachBottom: function() {
    // Do something when page reach bottom.
     console.log('circle 下一页');
 },
 在scroll-view里设定bindscrolltoupper和bindscrolltolower
在scroll-view里设定bindscrolltoupper和bindscrolltolower,然后在js里写好触发事件后对应的方法。[注意,使用这个模式一定要设置scroll-view的高度,100%不知道为什么设置后没效果,建议使用100vh]
 
文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161107
 
xml
 
 <scroll-view scroll-y = true bindscrolltolower="loadMore" bindscrolltoupper="refesh">
    ..........
</scroll-view>
js
 
onPullDownRefresh: function() {
    // Do something when pull down.
     console.log('刷新');
 },
 
 onReachBottom: function() {
    // Do something when page reach bottom.
     console.log('circle 下一页');
 },

标签: 微信小程序
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告