vant 使用List+dropdownmenu做一个带条件向上滚动加载更多数据页面的问题

Question

<template>
    <div id="job">
        <van-dropdown-menu>
            <van-dropdown-item v-model="tabsearch1" :options="tabsearchlist1" />
            <van-dropdown-item v-model="tabsearch2" :options="tabsearchlist2" :change="tabsearch(tabsearch2)" />
        </van-dropdown-menu>


        <van-list v-model="loading" :finished="finished" loading-text="加载中..." finished-text="没有更多啦" @load="load_more">
            <div class="van-clearfix news_list">
                <ul>
                    <li v-for="(item,ing) of infolist" :key="ing">
                        {{item.id}}{{item.area_text}}
                    </li>
                </ul>
            </div>
        </van-list>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "job",
        data() {
            return {
                infolist: [],
                loading: false, //加载状态
                finished: false, //是否加载
                page: 0,
                limit: 5,
                filter:'',
                tabsearch1: 0,
                tabsearch2: 0,
                tabsearchlist1: [{
                        text: '岗位类别',
                        value: 0
                    },
                    {
                        text: '新款商品',
                        value: 1
                    },
                    {
                        text: '活动商品',
                        value: 2
                    },
                ],
                tabsearchlist2: [{
                        text: '发布日期',
                        value: 0
                    },
                    {
                        text: '一周以内',
                        value: this.utils.getDay(-7)
                    },
                    {
                        text: '一月以内',
                        value: this.utils.getDay(-30)
                    },
                ],
            }
        },
        methods: {
            load_more: function() {
                this.page += 1; //页数+1
                this.onLoad();
            },
            onLoad: function() {
                const that = this;
                axios.get('/api/cms/getchanellist?'+that.filter, {
                    params: {
                        diyname: "oldhouse",
                        page: that.page,
                        pagesize: that.limit,
                    }
                }).then(function(res) {
                    if (res.status == 200) {
                        that.infolist = that.infolist.concat(res.data.data.data); //追加数据
                        if (res.data.data.data.length == 0) { //数据全部加载完成
                            that.finished = true;
                        } else {
                            that.loading = false;
                            that.finished = false;
                        }
                    }
                }).catch(function(error) {
                    that.finished = true;
                    console.log(error);
                });
            },
            tabsearch(value){
                console.log(value);
                const that = this;
                if(value != 0){
                    that.filter = 'filter[area]=10'
                    that.infolist = [];
                    that.page = 0 
                    that.load_more()//调用上面的方法向上滚动加载更多数据
                }
                

            }
        },
    }
</script>

做了一个页面，向上滚动加载更多数据，然后点击上面的下拉菜单，根据条件筛选出符合条件的数据填充页面。

1 现在下拉加载更多数据没有什么问题了，就是点上面的dropdownmenu下拉菜单的时候出问题了：会无限制的去请求接口，即便没有数据了也不会停止请求，感觉像个死循环不停的执行下去。

2 每次点开页面还没有点击下拉菜单的时候，这个函数就会自动执行了

tabsearch(value){
                console.log(value);
                const that = this;

tabsearch 这个函数按照VANT手册上说，点击选项后才执行。所以感觉问题1的无限制执行和这里有关

Answer 1

来结贴啦

现在才知道基础知识很重要

<van-dropdown-item v-model="tabsearch2" :options="tabsearchlist2" :change="tabsearch(tabsearch2)" />

这里应该使用

<van-dropdown-item v-model="tabsearch2" :options="tabsearchlist2" @change="tabsearch(tabsearch2)" />

这样，就不会自动调用执行了

另外，这里的DropdownMenu有个坑，就是下面菜单点击事件中再次调用这个load_more()的时候，只会执行一次。需要再给loading=true即可。
这个问题可以参照：https://www.freesion.com/arti...