vant-list的具体使用完整版(移动端分页)

南楼不知忆

已于 2024-01-23 10:32:24 修改

阅读量1k

点赞数 7

文章标签： vue

于 2023-12-27 16:29:58 首次发布

本文链接：https://blog.csdn.net/happyzhshzh/article/details/135249374

版权

 <!-- 列表 -->
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
     <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad">
         <ul class="evaluationList">
             <li>
                 <div class="title">
                     <span>友邦利市宝年金保险（万能型）</span>
                     <span>005006</span>
                 </div>
                 <div class="option">
                     <p class="optionItem" @click="goLink(1)">
                         <img src="./images/evaluate.png" alt="">
                         <span>产品评价</span>
                     </p>
                     <p class="line"></p>
                     <p class="optionItem" @click="goLink(2)">
                         <img src="./images/script.png" alt="">
                         <span>营销话术</span>
                     </p>
                 </div>
             </li>
         </ul>
     </van-list>
 </van-pull-refresh>

export default {
    data() {
        return {
            queryForm: {
                keyword: '',
                pageIndex: 1,
                pageSize: 10,
            },
            active: 0,
            finished: false, //是否已加载完成，加载完成后不再触发load事件
            loading: false,
            refreshing: false,
            dataList: [],
        }
    },
    mounted() {
        // this.getList()
    },
    methods: {
        //获取列表
        async getList() {
            let params = {
                ...this.queryForm
            }
            let res = await post('填写你的接口地址', params)
            this.loading = false //加载结束
            if ((res.data ?? '') !== '') {
                if (this.refreshing) {
                    this.dataList = [];
                    this.refreshing = false;
                }
                if (this.queryForm.pageIndex === 1) {
                    this.dataList = res.data
                } else {
                    this.dataList = [...this.dataList, ...res.data]
                }
                if (this.dataList.length == res.count) {
                    this.finished = true
                } else {
                    this.finished = false
                }
            }
        },
        //搜索框搜索
        onSearch() {
            this.queryForm.pageIndex = 1
            this.getList()
        },
        //上拉加载
        async onLoad() {
            console.debug('我执行啦')
            this.queryForm.pageIndex++
            await this.getList()
        },
        //下拉加载
        onRefresh() {
            this.queryForm.pageIndex = 1
            this.getList()
        },
        //tab标签切换
        handleTab(name, title) {
            console.error(name, title);
            // this.getList();
        },
    }
}