使用Vant3做移動端的感受

最近在使用Vant3做移動端。
感覺還可以，使用起來也簡單，但是也遇見一些坑。

圖片預覽ImagePreview的使用

在使用圖片預覽的時候，
我們在main.js中進行了全域性註冊
import { ImagePreview } from 'vant';
app.use(ImagePreview);
但是在需要使用的頁面，無法進行預覽
在網上的方法直接跟官網一模一樣
趕感覺真的是挺無語的。
後來在我需要使用圖片預覽我是這樣去解決的
<script>
import {ImagePreview} from "vant";
export default defineComponent({
    setup() {
        // 預覽圖片
        const showSpwierHander=(item)=>{
            ImagePreview({
                //images的資料結構是 [ 'yoururl','yoururl',]
                images: item.images,
                //closeable展示關閉的小圖示
                closeable: true,
            });
        }
   }
})
 

我對List列表的總結

List列表主要是用於展示長列表，
在頁面滑動到底部的時候載入下一頁的資料。
在後端出的介面是分頁的時候，一定會使用這個元件的。

業務邏輯模板

<div class="scroll-height">
    <van-list
        v-model:loading="listCont.loading"
        :finished="listCont.finished"
        :finished-text="listCont.finishedText"
        @load="onLoadhader"
    >
        <div class="module-list" @click="gotoPage" v-for="(item,index) in listCont.pageList" :key="index">
            你的內容
        </div>
    </van-list>
</div>

<!-- 我的js程式碼 -->
function listScollHooks(){
    let listCont=reactive({
        pageList:[],
        loading: false,
        finished: false,
        finishedText:'沒有更多了',
        params:{
            pageIndex: 0, //這裡要設定為0
            pageSize: 10,
        }
    })

    function onLoadhader(){
        listCont.params.pageIndex+=1;
        listCont.loading=true;// 開啟本次的載入狀態
        postmyAssetPageLookApi('');
    }

    function postmyAssetPageLookApi(type){
        postmyAssetPageLook(listCont.params).then(res=>{
            if(res.success&&res.data){
                listCont.loading=false;// 本次載入狀態結束 
                // 使用快取
                if( listCont.params.pageIndex==1){
                    listCont.pageList =res.data
                    // 提示語,如果搜尋後沒有資料提示未查詢到結果
                    if(type=='seatch'&&res.data.length==0){
                        listCont.finishedText='未查詢到結果'
                    }else{
                        listCont.finishedText='沒有更多了'
                    }
                }else{
                    listCont.pageList =listCont.pageList.concat(res.data);//追加資料
                }
                // 是否載入完了
                if(res.data.length==0 || listCont.pageList.length >= res.totalDatas){ //所有的資料載入完了
                    listCont.finished=true
                    if(type!='seatch'){
                        listCont.finishedText='沒有更多了'
                    }
                }else{
                    listCont.finished=false
                }
            }else{
                listCont.loading=false;// 本次的載入狀態結束 
                listCont.pageList=[]
                listCont.finished = true;
            }
        }).catch(()=>{
            listCont.loading=false;// 本次的載入狀態結束 
            listCont.pageList=[]
            listCont.finished = true;
        })
    }
    return {listCont,onLoadhader } 
}
 

詳細講解

loading: false,
loading設定為true表示處於載入狀態,false表示隱藏載入狀態。
所以我們最初會將loading設定為false。
需要注意的是當onLoadhader被觸發的時候。
Vant底層會將loading重新設定為true.
所以你在載入的時候不需要將loading設定為true.
我這裡寫了是為了方便我的理解。
所以最終你只需要將本次請求的結果完成後,
無論成功還是失敗重置為false。表示本次請求已經完成了。

finished: false,
finished是否已載入完成，載入完成後不再觸發 load 事件
最初我們一定要設定為false.表示我們還沒有載入完
當你把所有的資料都載入完了，一定要將finished設定為true。
否者肯定會造成瀏覽器記憶體洩漏，這個是非常嚴重的哈~~
表示已經沒有資料可以載入了。
否者滾動的時候回觸發 @load="onLoadhader"這個函式

finishedText:'沒有更多了',表示=>載入完成後的提示語

@load在頁面渲染的時候會自動執行。
所以頁碼的初始值你需要設定為0
每次滾動到底部的時候，都會執行@load函式

需要注意的地方
有些小夥伴可能會發現有些時候。
@load這個函式在頁面渲染後執行了兩次
這個是正常的現象，請不要擔心。
比如說你的總條數是5條，你每次請求10資料，
那麼頁面渲染完畢後會執行兩次@load

細心的小夥伴可能發現我註釋上有快取。
因為在前進和後退的時候，
這樣不會造成頁面上有一瞬間的空白。
優先使用上一次的資料，等介面返回後及時重新整理
這個就是我對List元件的理解
 

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！