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]
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>
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:
//在小程序项目目录中执行下面的函数 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!