欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

微信小程序入门（五）上滑加载下拉刷新

发布：2018-01-25 17:16浏览： 次来源：网络 作者：tianshu

之前谈到文章列表的数据加载，是一次性全部加载，这样是不友好的。这章介绍加载和刷新。

效果图：

微信小程序入门（五）上滑加载下拉刷新(图1)

先介绍在IDE中，怎么模拟上滑这个操作。开始我是用鼠标点击文章列表，然后先上移动。结果一直没有结果，以为是代码写的有问题。其实并不是，上滑，下拉这个操作，只需要用鼠标的滚轮即可。

首先，我们先完成上滑和下拉这个功能。

list.wxml文件：

 
  1. <view  class="page">  
  2.     <view class="page__bd">  
  3.         <!--用name 定义模版-->  
  4.         <template name="msgTemp">  
  5.             <!--  
  6.             1. scaleToFill : 图片全部填充显示，可能导致变形 默认  
  7.             2. aspectFit ： 图片全部显示，以最长边为准  
  8.             3. aspectFill ： 图片全部显示，以最短边为准  
  9.             4. widthFix ： 宽不变，全部显示图片  
  10.             -->  
  11.             <view  class="weui-panel__bd">  
  12.                 <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">  
  13.                     <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">  
  14.                         <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/>  
  15.                     </view>  
  16.                     <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">  
  17.                         <view class="weui-media-box__title">{{title}}</view>  
  18.                         <view class="weui-media-box__desc">{{time}}</view>  
  19.                     </view>  
  20.                 </navigator>  
  21.             </view>  
  22.         </template>  
  23.           
  24.         <scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh"  bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access">  
  25.             <view class="weui-panel__hd">文章列表</view>  
  26.                 <view wx:for-items="{{msgList}}" wx:key="{{item.id}}">  
  27.                     <view class="kind-list__item">  
  28.                         <!--用is 使用模版-->  
  29.                         <template is="msgTemp" data="{{...item}}"/>  
  30.                     </view>  
  31.                 </view>  
  32.         </scroll-view>  
  33.         <view>  
  34.             <loading hidden="{{hidden}}" bindchange="loadingChange">  
  35.             加载中...  
  36.             </loading>  
  37.         </view>  
  38.     </view>  
  39.     <view class="page__ft">  
  40.     </view>  
  41. </view>  

 

 

在原来的基础上，多用了一个scroll-view （官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html） 我是加载文章列表的上面，

第一步：要设置允许它纵向滚动 scroll-y = true ，

第二步：要给一个固定高度，文档中也明确要求了这点。这里是动态获取手机配置的高度和宽度。

第三步：要设置bindscrolltoupper （下拉） 和 bindscrolltolower （上滑） 响应的方法。

第四步：要设置 scroll-top （用于定位） 和 bindscroll （滚动的时候执行，和前者一起用可达到定位效果）

第五步：加载页面icon设置，直接copy即可。


list.js 文件：

 
  1. // pages/list/list.js  
  2. var app = getApp();  
  3.   
  4. // 当前页数  
  5. var pageNum = 1;  
  6.   
  7.   
  8. // 加载数据  
  9. var loadMsgData = function(that){  
  10.   that.setData({  
  11.     hidden:false  
  12.   });  
  13.   var allMsg = that.data.msgList;  
  14.   app.ajax.req('/itdragon/findAll',{  
  15.     "page":pageNum , "pageSize" : 6  
  16.   },function(res){    
  17.     // 不能直接 allMsg.push(res); 相当于list.push(list);打乱了结构  
  18.     for(var i = 0; i < res.length; i++){  
  19.       allMsg.push(res[i]);  
  20.     }  
  21.     that.setData({  
  22.       msgList:allMsg  
  23.     });  
  24.     pageNum ++;  
  25.     that.setData({  
  26.       hidden:true  
  27.     });  
  28.   });  
  29. }  
  30.   
  31. Page({  
  32.   data:{  
  33.     msgList:[],  
  34.     hidden:true,  
  35.     scrollTop : 0,  
  36.     scrollHeight:0  
  37.   },  
  38.   onLoad:function(options){  
  39.     // 页面初始化 options为页面跳转所带来的参数  
  40.     var that = this;  
  41.     wx.getSystemInfo({  
  42.       success: function(res) {  
  43.         that.setData( {  
  44.           windowHeight: res.windowHeight,  
  45.           windowWidth: res.windowWidth  
  46.         })  
  47.       }  
  48.     });  
  49.     loadMsgData(that);  
  50.   },  
  51.   onReady:function(){  
  52.     // 页面渲染完成  
  53.   },  
  54.   onShow:function(){  
  55.     // 页面显示  
  56.   },  
  57.   // 下拉刷新数据  
  58.   pullDownRefresh: function() {  
  59.     var that = this;  
  60.     pageNum = 1;  
  61.     that.setData({  
  62.       msgList : [],  
  63.       scrollTop : 0  
  64.     });  
  65.     loadMsgData(that);  
  66.   },  
  67.   
  68.   // 上拉加载数据 上拉动态效果不明显有待改善  
  69.   pullUpLoad: function() {  
  70.     var that = this;  
  71.     loadMsgData(that);  
  72.   },  
  73.   // 定位数据  
  74.   scroll:function(event){  
  75.     var that = this;  
  76.     that.setData({  
  77.       scrollTop : event.detail.scrollTop  
  78.     });  
  79.  },  
  80.   onHide:function(){  
  81.     // 页面隐藏  
  82.   },  
  83.   onUnload:function(){  
  84.     // 页面关闭  
  85.   }  
  86. })  

第一点：如果对 app.ajax.req 里面的方法看不懂，可以参考：微信小程序request请求 （有对应接口源码）

第二点：因为是分页查询，需要把上一次查询内容保存，所以用list.push 拼接。

第三点：每次查询后，页数都要加一，并且加载前要显示加载的icon，加载结束要隐藏。

第四点：页面加载初始化获取设置信息，官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject

第五点：下拉的逻辑，将页数设置为一，并清空msgList 内容，定位距顶部0px，最后调用加载数据的方法。

第六点：上滑的逻辑，直接调用。因为定位点在scorll方法中已经赋值。

第七点：如果调用我的接口，是不能用appid的，需要重新创建一个项目，选择无appid。

 

这样加载和刷新就完成了，虽然对刷新很不满意，网上找了很多例子都是这样，如果有好的效果，请赐教。






免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有