微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载

样式基于weui

首先需要配置页面的json文件，启用下拉刷新

{"enablePullDownRefresh": true
}

在WXML里，通过列表渲染即可显示数据

<view class="weui-panel__bd"><view wx:for="{{list}}" wx:key="item" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"><view class="weui-media-box__hd weui-media-box__hd_in-appmsg"><image class="weui-media-box__thumb" src="{{item.coverpic ? item.coverpic : '/src/img/coverpic.png'}}" /></view><view class="weui-media-box__bd weui-media-box__bd_in-appmsg"><view class="weui-media-box__title">{{item.title}}<block wx:if="{{item.groupid==2}}"><view class="weui-badge" style="margin-left: 5px;" wx:if="{{item.ishidden==1}}">隐藏</view><view class="weui-badge" style="margin-left: 5px;" wx:if="{{item.status==0}}">待审核</view><view class="weui-badge" style="margin-left: 5px;" wx:if="{{item.status==2}}">请修改</view></block></view><view class="weui-flex"><block wx:if="{{item.groupid==2}}"><navigator class="placeholder">详情</navigator><navigator class="placeholder" url="/pages/my/activity/add/add?activity_id={{item.activity_id}}">编辑</navigator><navigator class="placeholder" url="/pages/my/activity/form/form?activity_id={{item.activity_id}}">报名信息</navigator><navigator class="placeholder">项目</navigator><navigator class="placeholder">赛程</navigator></block><navigator class="placeholder">签到</navigator></view></view></view><view class="weui-loadmore weui-loadmore_line" hidden='{{hasmoreData}}'><view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无更多数据</view></view><view class="weui-loadmore" hidden='{{hiddenloading}}'><view class="weui-loading"></view><view class="weui-loadmore__tips">正在加载</view></view></view>

JS部分我是将post再封装了一次，这边主要用到onPullDownRefresh和onReachBottom两个方法

var app = getApp()
Page({data: {num:10,count:-1,page: 0,list: [],hasmoreData: true,hiddenloading: true,},onLoad: function (options) {this.getList()},onPullDownRefresh: function () {this.setData({num:10,count:-1,page:0,list:[],hasmoreData:true,hiddenloading:true})this.getList();console.log('刷新数据')wx.stopPullDownRefresh()},onReachBottom: function () {console.log('加载更多')this.setData({ hiddenloading:false})this.getList()},getList: function () {var that = thisif (that.data.count!=-1&&that.data.page * that.data.num >= that.data.count) {that.setData({ hasmoreData: false, hiddenloading:true })return}app.post('链接',{page:that.data.page},function(res){//这边是我自己的封装的post方法，具体大家再看if (res.count == 0) that.setData({ count: res.data.count,hasmoreData: false })for(var i=0;i<res.data.list.length;i++){that.data.list.push(res.data.list[i])}that.setData({ count: res.data.count, num: res.data.num,page:that.data.page+1,list:that.data.list,hiddenloading:true})if (!res.data.hasmoreData) that.setData({ hiddenloading: true })})},
})

完整说明：

将请求接口封装为一个方法
通过监听onPullDownRefresh，先对data中的数据进行初始化，然后请求接口
通过监听onReachBottom，实现加载分页数据

微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载相关推荐

微信小程序如何实现上拉刷新（即分页加载数据）？
步骤1. enablePullDownRefresh这个属性设置为true.enablePullDownRefresh可以写在app.json 中和页面的xx.json,两者的区别是, app.j ...
微信小程序点击按钮弹出弹窗_微信小程序点击按钮弹出底部上拉菜单
小程序底部弹出菜单操作.gif html //index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{{menu}} js //index.js Pag ...
每日三思:微信小程序多层级父子组件如何在子组件滚动加载
碰到的问题是如果将孙子组件单独拿出来是能滚动加载数据的,但是如果父组件存在切换的tab,子组件也存在tab切换,子组件就无法滚动加载数据示意图代码结构刚开始的处理思路在子组件中使用滚动加载,但 ...
微信小程序直播间实现下拉刷新(目前全网最优最美观的方法)
微信小程序直播间实现下拉刷新先上效果: 1.下拉距离一定时出现动画,保持下拉直到距离足够大时触发函数加载直播间列表,而且在足够大距离时会有振动反馈,增强用户体验 2.下拉小距离出现动画,此时释放不会 ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...
微信小程序下拉刷新/上拉加载组件
简介一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件,需要基础库2.10.1及以上, 项目地址:github 预览功能下拉刷新上拉加载支持自定义下拉样式 ...
小程序下拉刷新上拉加载等多
小程序下拉刷新上拉加载下拉刷新在当前页面的json文件中开启上拉刷新 async getGoodsList(){ //定义参数信息var n=this.data.infoconst res=aw ...
微信小程序开发工具win10下编译非常慢解决方法
微信小程序开发工具win10下编译非常慢的解决方法点击微信小程序开发工具右侧详情,在本地设置中将[启用多核心编译]选项去掉,开发工具重启即可
微信小程序实现线上线下全渠道精准运营
从支付宝推出余额宝.花呗等功能大幅培养用户理财习惯,到微信支付通过微信红包打通"朋友圈",微信支付和支付宝的擂台之战从未平息,面对10亿交易笔数到20亿的跨越,较量已经从扫码支付延 ...

微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载

微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载相关推荐

最新文章

热门文章