這篇文章主要介紹“如何實(shí)現(xiàn)小程序中下拉刷新和上拉加載功能”，在日常操作中，相信很多人在如何實(shí)現(xiàn)小程序中下拉刷新和上拉加載功能問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何實(shí)現(xiàn)小程序中下拉刷新和上拉加載功能”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司于2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元夏津做網(wǎng)站,已為上家服務(wù),為夏津各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):13518219792

下拉刷新及上拉加載wxml文件編寫(xiě)

當(dāng)我們使用scroll-view滑動(dòng)組件展示列表時(shí)，其本身就存在下拉刷新和上拉加載的觸發(fā)函數(shù)

<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50"   
bindscrolltoupper="refresh"  style="height:700px">
  <l-loadmore show="{{upfresh}}" bindscrolltolower="getMore"  type="loading" loading-text="拼命刷新中">
</l-loadmore>

<l-loadmore show="{{downfresh}}" type="loading" loading-text="拼命加載中">
</l-loadmore>

• scroll-y: 是否允許縱向滾動(dòng)，默認(rèn)為false,這里我們?cè)O(shè)置為true

• upper-threshold: 距頂部/左邊多遠(yuǎn)時(shí)，觸發(fā) scrolltoupper 事件（下拉刷新）

• bindscrolltoupper:滾動(dòng)到頂部/左邊時(shí)觸發(fā),這里設(shè)置滾動(dòng)到頂部需要觸發(fā)的函數(shù)

• bindscrolltolower：滾動(dòng)到頂部/右邊時(shí)觸發(fā)

引入line-ui框架

這里我使用的下拉刷新和上拉加載展示組件是lin-ui框架提供的，這里我說(shuō)下如何引入lin-ui框架：

lin-ui官方文檔地址

//在小程序項(xiàng)目目錄中執(zhí)行下面的函數(shù)
npm install lin-ui

然后在需要引入組件的頁(yè)面的json文件中進(jìn)行引入

"usingComponents": {
    "l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
    "l-loading":"/miniprogram_npm/lin-ui/loading/index",
  },

這樣lin-ui組件就引入成功了

js代碼編寫(xiě)

data: {
    downfresh:false,//底部加載展示控制
    upfresh:false//頂部加載展示控制
  },

首先在data中設(shè)置加載組件是否顯示，默認(rèn)都不顯示

下拉刷新js代碼

//下拉刷新
refresh(){
    if(this.data.upfresh){
      console.log("還沒(méi)刷新完成")
      return;
    }
    var that = this;
    this.setData({
      upfresh: true,
      // upfresh:false
    })
   
    setTimeout(function() {
      //updateData為自己的數(shù)據(jù)更新邏輯代碼
      that.updateData(true,()=>{
        that.setData({
          upfresh: false,
      });
     })
      // wx.hideLoading();
    console.info('下拉刷新加載完成.');
  }, 500);
  },
    
      //更新數(shù)據(jù)
   updateData:function(tail, callback) {
  
    var that = this;
    console.log("updatedata-=-=seea"+that.data.searchValue)
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: 0,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        this.setData({
          componys: res.data
        })
        if (callback) {
          callback();
        }
      }
    })
   },

上拉加載js代碼

 /**
   * 滑動(dòng)到底部加載更多
   */
  getMore(){
    // downloadingData=this.data.downloadingData
    if(this.data.downfresh){
      console.log("還沒(méi)加載完成")
      return;
    }
   var that = this;
    this.setData({
      downfresh: true,
      // upfresh:false
    })
   
    this.setData({
      downloadingData: true
      // upfresh:false
    })

    setTimeout(function() {
      that.loadData(true,()=>{
        that.setData({
        downfresh: false
      });
     })
      // wx.hideLoading();
    console.info('上拉數(shù)據(jù)加載完成.');
  }, 1000);
  },
    
      loadData: function(tail, callback) {
    var that = this;
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: that.data.componys.length,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        // console.log(JSON.stringify(res.data))
        that.setData({
          componys: that.data.componys.concat(res.data),
        });
        if (callback) {
          callback();
        }
      }
    })
  },

整個(gè)下拉刷新和上拉加載的功能我們就已經(jīng)實(shí)現(xiàn)了，主要就是利用到了scroll-view的組件特性，根據(jù)觸發(fā)的時(shí)機(jī)來(lái)控制記載組件的顯隱，整體實(shí)現(xiàn)并不是很難，具體代碼可根據(jù)自己的實(shí)際情況做適當(dāng)調(diào)整哦。

到此，關(guān)于“如何實(shí)現(xiàn)小程序中下拉刷新和上拉加載功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

當(dāng)前文章：如何實(shí)現(xiàn)小程序中下拉刷新和上拉加載功能
文章URL：http://aaarwkj.com/article42/jpochc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、虛擬主機(jī)、Google

廣告

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