微信小程序下拉加载和上拉刷新两种实现方法详解
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新
首先要在json文件里设置window属性
设置js里onPullDownRefresh和onReachBottom方法
下拉加载说明:
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onPullDownRefresh(){ console.log('--------下拉刷新-------') wx.showNavigationBarLoading()//在标题栏中显示加载 wx.request({ url:'https://URL', data:{}, method:'GET', //OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT //header:{},//设置请求的header success:function(res){ //success }, fail:function(){ //fail }, complete:function(){ //complete wx.hideNavigationBarLoading()//完成停止加载 wx.stopPullDownRefresh()//停止下拉刷新 } })
方法二:在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉
index.wxml
{{item.name}} {{item.short_description}} 加载中...
index.js
varurl="http://www.imooc.com/course/ajaxlist"; varpage=0; varpage_size=5; varsort="last"; varis_easy=0; varlange_id=0; varpos_id=0; varunlearn=0; //请求数据
varloadMore=function(that){ that.setData({ hidden:false }); wx.request({ url:url,
data:{ page:page, page_size:page_size, sort:sort, is_easy:is_easy, lange_id:lange_id, pos_id:pos_id, unlearn:unlearn }, success:function(res){ //console.info(that.data.list); varlist=that.data.list; for(vari=0;i})
index.wxss
/**index.wxss**/ .userinfo{ display:flex; flex-direction:column; align-items:center; } .userinfo-avatar{ width:128rpx; height:128rpx; margin:20rpx; border-radius:50%; } .userinfo-nickname{ color:#aaa; } .usermotto{ margin-top:200px; } /**/ scroll-view{ width:100%; } .item{ width:90%; height:300rpx; margin:20rpxauto; background:brown; overflow:hidden; } .item.img{ width:430rpx; margin-right:20rpx; float:left; } .title{ font-size:30rpx; display:block; margin:30rpxauto; } .description{ font-size:26rpx; line-height:15rpx; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。