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