<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
3個tab頁籤切換時,呼叫不同介面,在某一個tab只要翻頁到>=2的情況,當它再點選到另一個tab的時候,另外一個tab就會連續呼叫兩次查詢介面
(因為它不僅觸發了created還觸發了onload事件:且順序為:進入created呼叫查詢介面,在.then之前,非同步查詢還未返回的時候,又會去觸發onload事件,在current+=1之後再次進行查詢)
知識點運用:
List 元件通過 loading 和 finished 兩個變數控制載入狀態,當元件捲動到底部時,會觸發 load事件並將 loading 設定成 true。
此時可以發起非同步操作並更新資料,資料更新完畢後,將 loading 設定成 false 即可。
若資料已全部載入完畢,則直接將 finished 設定成 true 即可。
List 會監聽瀏覽器的捲動事件並計算列表的位置,當列表底部與可視區域的距離小於offset時,List會觸發一次 load 事件。
List 初始化後會觸發一次 load事件,用於載入第一屏的資料,這個特性可以通過immediate-check屬性關閉。
如果一次請求載入的資料條數較少,導致列表內容無法鋪滿當前螢幕,List 會繼續觸發 load事件,直到內容鋪滿螢幕或資料全部載入完成。
因此你需要調整每次獲取的資料條數,理想情況下每次請求獲取的資料條數應能夠填滿一屏高度。
List有以下三種狀態,理解這些狀態有助於你正確地使用List元件:
這次遇到的問題,可以利用第五點,解決方法:
在進入created的傳送請求之前,將this.loading = true , ⇒⇒⇒ (利用:載入中,loading為true,表示正在傳送非同步請求,此時不會觸發load事件),讓系統知道此時正在非同步請求資料,讓它別觸發onload事件
程式碼:
<van-list v-model="loading" class="van-list-style" :immediate-check="false" :finished="finished" :finished-text="finishedText" :error.sync="error" error-text="請求失敗,點選重新載入" @load="onLoad"> <div class="list" v-if="dataList.length > 0"> <div class="list-box2" v-for="(item,index) in dataList" :key="index" @click="handleClick(item)"> ……………………………………… </div> </div> <div v-if="noData" style="margin-top:30%"> <img src="@/common/imgs/no-data.png" alt="" style="width:100%"> </div> </van-list> data() { return { dataList:[], current:1, size:10, loading: false, // 上拉載入 ?????? finished: false, // 上拉載入完畢 error: false, // 是否展示錯誤 finishedText:"沒有更多了", noData:false, // 是否展示沒有資料的圖片 // offset: 100 // 卷軸與底部距離小於 offset 時觸發load事件 } }, created() { // 呼叫列表查詢介面 this.init(this.tab) }, methods:{ init(val) { if(val === '1') { this.createList(1,10) } }, //查詢介面 createList(current,size) { let param = { current:current, size:size } // 重點!!!!!!!!!在這裡將loading置為true ***this.loading = true;*** createList(param).then(res=>{ let that = this if(res.status == true) { //賦值 const dataList = res.body.records const pages = res.body.pages // 如果返回資料為空 if(dataList == null || dataList.length === 0) { that.finished = true that.finishedText = "沒發現任何東西,去其他地方逛逛吧~" that.noData = true return } // 載入狀態結束 可以寫在這裡也可以寫在finally裡面 that.loading = false; // 根據當前頁進行資料處理 if(that.current === 1) { that.dataList = dataList } else { that.dataList = that.dataList.concat(dataList) } // xxx!!!最後一頁不足10條的情況 ,這樣寫實際有問題,因為如果是最後一頁為10條的情況,就會第二次去呼叫介面 //if(dataList.length < that.size) { // that.finished = true //that.finishedText = '沒有更多了'; //} // 使用這種!! 證明已經是最後一頁了 if(that.current = pages) { that.finished = true that.finishedText = '沒有更多了'; } } }) .catch(err=>{this.error = true; }) .finally(()=>{this.loading = false }) }, // 上拉重新整理 onLoad() { this.current+=1 this.createList(this.current,this.size) }, }
以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45