微信小程序功能上滑加載下拉刷新-創(chuàng)新互聯(lián)

這篇文章主要介紹了微信小程序功能上滑加載下拉刷新，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司基于成都重慶香港及美國等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管報價，主機(jī)托管價格性價比高，為金融證券行業(yè)成都多線機(jī)房，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于微信小程序功能實(shí)現(xiàn)：上滑加載下拉刷新，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

之前談到文章列表的數(shù)據(jù)加載，是一次性全部加載，這樣是不友好的。這章介紹加載和刷新。

先介紹在IDE中，怎么模擬上滑這個操作。開始我是用鼠標(biāo)點(diǎn)擊文章列表，然后先上移動。結(jié)果一直沒有結(jié)果，以為是代碼寫的有問題。其實(shí)并不是，上滑，下拉這個操作，只需要用鼠標(biāo)的滾輪即可。

首先，我們先完成上滑和下拉這個功能。

list.wxml文件：

<view  class="page">
    <view class="page__bd">
        <!--用name 定義模版-->
        <template name="msgTemp">
            <!--
            1. scaleToFill : 圖片全部填充顯示，可能導(dǎo)致變形 默認(rèn)
            2. aspectFit ： 圖片全部顯示，以最長邊為準(zhǔn)
            3. aspectFill ： 圖片全部顯示，以短邊為準(zhǔn)
            4. widthFix ： 寬不變，全部顯示圖片
            -->
            <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">
                        <!--用is 使用模版-->
                        <template is="msgTemp" data="{{...item}}"/>
                    </view>
                </view>
        </scroll-view>
        <view>
            <loading hidden="{{hidden}}" bindchange="loadingChange">
            加載中...
            </loading>
        </view>
    </view>
    <view class="page__ft">
    </view>
</view>

在原來的基礎(chǔ)上，多用了一個scroll-view （官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html）我是加載文章列表的上面，

第一步：要設(shè)置允許它縱向滾動 scroll-y = true ，

第二步：要給一個固定高度，文檔中也明確要求了這點(diǎn)。這里是動態(tài)獲取手機(jī)配置的高度和寬度。

第三步：要設(shè)置bindscrolltoupper （下拉）和 bindscrolltolower （上滑）響應(yīng)的方法。

第四步：要設(shè)置 scroll-top （用于定位）和 bindscroll （滾動的時候執(zhí)行，和前者一起用可達(dá)到定位效果）

第五步：加載頁面icon設(shè)置，直接copy即可。

list.js 文件：

// pages/list/list.js
var app = getApp();

// 當(dāng)前頁數(shù)
var pageNum = 1;


// 加載數(shù)據(jù)
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); 相當(dāng)于list.push(list);打亂了結(jié)構(gòu)
    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為頁面跳轉(zhuǎn)所帶來的參數(shù)
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData( {
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    });
    loadMsgData(that);
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  // 下拉刷新數(shù)據(jù)
  pullDownRefresh: function() {
    var that = this;
    pageNum = 1;
    that.setData({
      msgList : [],
      scrollTop : 0
    });
    loadMsgData(that);
  },

  // 上拉加載數(shù)據(jù) 上拉動態(tài)效果不明顯有待改善
  pullUpLoad: function() {
    var that = this;
    loadMsgData(that);
  },
  // 定位數(shù)據(jù)
  scroll:function(event){
    var that = this;
    that.setData({
      scrollTop : event.detail.scrollTop
    });
 },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關(guān)閉
  }
})

第一點(diǎn)：如果對 app.ajax.req 里面的方法看不懂，可以參考：微信小程序request請求（有對應(yīng)接口源碼）

第二點(diǎn)：因?yàn)槭欠猪摬樵?，需要把上一次查詢?nèi)容保存，所以用list.push 拼接。

第三點(diǎn)：每次查詢后，頁數(shù)都要加一，并且加載前要顯示加載的icon，加載結(jié)束要隱藏。

第四點(diǎn)：頁面加載初始化獲取設(shè)置信息，官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject

第五點(diǎn)：下拉的邏輯，將頁數(shù)設(shè)置為一，并清空msgList 內(nèi)容，定位距頂部0px，最后調(diào)用加載數(shù)據(jù)的方法。

第六點(diǎn)：上滑的邏輯，直接調(diào)用。因?yàn)槎ㄎ稽c(diǎn)在scorll方法中已經(jīng)賦值。

第七點(diǎn)：如果調(diào)用我的接口，是不能用appid的，需要重新創(chuàng)建一個項(xiàng)目，選擇無appid。

這樣加載和刷新就完成了，雖然對刷新很不滿意，網(wǎng)上找了很多例子都是這樣，如果有好的效果，請賜教。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序功能上滑加載下拉刷新”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

當(dāng)前名稱：微信小程序功能上滑加載下拉刷新-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://bm7419.com/article18/gecdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站制作、網(wǎng)站策劃、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容