使用Vant做移動端對圖片預覽ImagePreview和List的理解

使用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組件的理解