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

青灯夜游
Lepaskan: 2021-10-26 10:49:22
ke hadapan
2913 orang telah melayarinya

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!

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

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>
Salin selepas log masuk
  • 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
Salin selepas log masuk

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",
  },
Salin selepas log masuk

Dengan cara ini, komponen lin-ui berjaya diperkenalkan

penulisan kod js

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

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(&#39;下拉刷新加载完成.&#39;);
  }, 500);
  },
    
      //更新数据
   updateData:function(tail, callback) {
  
    var that = this;
    console.log("updatedata-=-=seea"+that.data.searchValue)
    wx.request({
      url: app.gBaseUrl + &#39;compony-detail/page&#39;,
      method: &#39;GET&#39;,
      data: {
        page: 0,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        this.setData({
          componys: res.data
        })
        if (callback) {
          callback();
        }
      }
    })
   },
Salin selepas log masuk

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(&#39;上拉数据加载完成.&#39;);
  }, 1000);
  },
    
      loadData: function(tail, callback) {
    var that = this;
    wx.request({
      url: app.gBaseUrl + &#39;compony-detail/page&#39;,
      method: &#39;GET&#39;,
      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();
        }
      }
    })
  },
Salin selepas log masuk

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!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!