Perbincangan ringkas tentang cara melaksanakan fungsi muat semula tarik-turun dan muat naik dalam program mini? (dengan kod)

Artikel ini akan memperkenalkan kepada anda cara melaksanakan fungsi muat semula tarik ke bawah dan pemuatan tarik ke atas dalam program mini saya harap ia akan membantu anda!

Apabila memaparkan data senarai, jika terdapat banyak data atau ia dikemas kini dengan cepat, anda perlu menyediakan fungsi muat semula tarik naik dan muat turun untuk menambah baik pengguna pengalaman. [Cadangan pembelajaran berkaitan: Tutorial pembangunan program mini]

Tarik ke bawah untuk muat semula dan tarik ke atas untuk memuatkan penulisan fail wxml

Apabila kami menggunakan skrol -lihat ke slaid Apabila komponen memaparkan senarai, ia mempunyai fungsi pencetus untuk muat semula tarik-turun dan pemuatan tarik-turun

<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>

• skrol-y: sama ada membenarkan tatal menegak, lalainya ialah palsu, di sini kita tetapkan kepada benar
• ambang atas: Sejauh mana dari bahagian atas/kiri, peristiwa scrolltoupper dicetuskan (tarik ke bawah untuk memuat semula)
• bindscrolltoupper: Dicetuskan semasa menatal ke atas/kiri, di sini tetapkan fungsi yang perlu dicetuskan apabila menatal ke atas
• bindscrolltolower: dicetuskan apabila menatal ke atas/kanan

Memperkenalkan rangka kerja line-ui

Buku lungsur yang saya gunakan di sini Komponen paparan muat semula dan muat turun disediakan oleh rangka kerja lin-ui Di sini saya akan bercakap tentang caranya untuk memperkenalkan rangka kerja lin-ui:

alamat dokumen rasmi lin-ui

//在小程序项目目录中执行下面的函数
npm install lin-ui

Kemudian perkenalkan dalam fail json halaman di mana komponen perlu diperkenalkan

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

Dengan cara ini, komponen lin-ui berjaya diperkenalkan

penulisan kod js

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

Pertama, tetapkan sama ada komponen pemuatan dipaparkan dalam data Secara lalai, ia tidak akan dipaparkan

Tarik ke bawah untuk memuat semula kod js

//下拉刷新
refresh(){
    if(this.data.upfresh){
      console.log("还没刷新完成")
      return;
    }
    var that = this;
    this.setData({
      upfresh: true,
      // upfresh:false
    })
   
    setTimeout(function() {
      //updateData为自己的数据更新逻辑代码
      that.updateData(true,()=>{
        that.setData({
          upfresh: false,
      });
     })
      // wx.hideLoading();
    console.info('下拉刷新加载完成.');
  }, 500);
  },
    
      //更新数据
   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();
        }
      }
    })
   },

Kod js pemuatan tarik ke atas

 /**
   * 滑动到底部加载更多
   */
  getMore(){
    // downloadingData=this.data.downloadingData
    if(this.data.downfresh){
      console.log("还没加载完成")
      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('上拉数据加载完成.');
  }, 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();
        }
      }
    })
  },

Kami telah pun melaksanakan keseluruhan fungsi muat semula tarik-turun dan pemuatan tarik-turun, terutamanya dengan menggunakan ciri komponen tatal- pandangan. Mengikut Pelaksanaan keseluruhan tidak sukar untuk mengawal paparan dan penyembunyian komponen rakaman pada masa pencetus Kod khusus boleh dilaraskan dengan sewajarnya mengikut situasi sebenar anda.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang cara melaksanakan fungsi muat semula tarik-turun dan muat naik dalam program mini? (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!