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

怼烎@ 2022-09-28 11:57 156阅读 0赞

![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvODA2OTU2LzIwMjAwNy84MDY5NTYtMjAyMDA3MzEyMzQ1MDc3MjItMTExNjgwOTkyMi5naWY][]

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

效果图：

![20170311102157574][]

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

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

list.wxml文件：

<view  class="page">
        <view class="page__bd">
            
            <template name="msgTemp">
                
                <view  class="weui-panel__bd">
                    <navigator url="../detail/detail?id={
       {id}}" 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="{
       {src}}" style="width: 60px; height: 60px;"/>
                        </view>
                        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                            <view class="weui-media-box__title">{
       {title}}</view>
                            <view class="weui-media-box__desc">{
       {time}}</view>
                        </view>
                    </navigator>
                </view>
            </template>
            
            <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">
                <view class="weui-panel__hd">文章列表</view>
                    <view wx:for-items="{
       {msgList}}" wx:key="{
       {item.id}}">
                        <view class="kind-list__item">
                            
                            <template is="msgTemp" data="{
       {...item}}"/>
                        </view>
                    </view>
            </scroll-view>
            <view>
                <loading hidden="{
       {hidden}}" bindchange="loadingChange">
                加载中...
                </loading>
            </view>
        </view>
        <view class="page__ft">
        </view>
    </view>

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

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

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

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

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

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

list.js 文件：

// pages/list/list.js
    var app = getApp();
    
    // 当前页数
    var pageNum = 1;
    
    
    // 加载数据
    var loadMsgData = function(that){
      that.setData({
        hidden:false
      });
      var allMsg = that.data.msgList;
      app.ajax.req('/itdragon/findAll',{
        "page":pageNum , "pageSize" : 6
      },function(res){  
        // 不能直接 allMsg.push(res); 相当于list.push(list);打乱了结构
        for(var i = 0; i < res.length; i++){
          allMsg.push(res[i]);
        }
        that.setData({
          msgList:allMsg
        });
        pageNum ++;
        that.setData({
          hidden:true
        });
      });
    }
    
    Page({
      data:{
        msgList:[],
        hidden:true,
        scrollTop : 0,
        scrollHeight:0
      },
      onLoad:function(options){
        // 页面初始化 options为页面跳转所带来的参数
        var that = this;
        wx.getSystemInfo({
          success: function(res) {
            that.setData( {
              windowHeight: res.windowHeight,
              windowWidth: res.windowWidth
            })
          }
        });
        loadMsgData(that);
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      // 下拉刷新数据
      pullDownRefresh: function() {
        var that = this;
        pageNum = 1;
        that.setData({
          msgList : [],
          scrollTop : 0
        });
        loadMsgData(that);
      },
    
      // 上拉加载数据 上拉动态效果不明显有待改善
      pullUpLoad: function() {
        var that = this;
        loadMsgData(that);
      },
      // 定位数据
      scroll:function(event){
        var that = this;
        that.setData({
          scrollTop : event.detail.scrollTop
        });
     },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      }
    })

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

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

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

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

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

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

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

这样加载和刷新就完成了，虽然对刷新很不满意，网上找了很多例子都是这样，如果有好的效果，请赐教。下一章介绍本地缓存的功能。

微信小程序入门教程集合：[微信小程序入门教程全集][Link 1]

[aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvODA2OTU2LzIwMjAwNy84MDY5NTYtMjAyMDA3MzEyMzQ1MDc3MjItMTExNjgwOTkyMi5naWY]: /images/20220708/561070910eff481f80406a6f5863c8bc.png
[20170311102157574]: /images/20220708/7919372153c84ae4867e0c830e36991f.png
[https_mp.weixin.qq.com_debug_wxadoc_dev_component_scroll-view.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html
[request]: http://blog.csdn.net/qq_19558705/article/details/60783448
[https_mp.weixin.qq.com_debug_wxadoc_dev_api_systeminfo.html_wxgetsysteminfoobject]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject
[Link 1]: http://www.itit123.cn/blog/detail/19.html