element-ui 无限滚动加载列表

注意：infinite-scroll-distance必须有值

                <div class="list1 infinite-list" v-infinite-scroll="load" infinite-scroll-immediate="false"
                    infinite-scroll-distance="10">
                    <div class="list_item flex_box" v-for="item, index in list1" :key="item.id">
                        <div class="col1">
                            <el-checkbox v-model="item.checked" @change="getCurrentRow(item)"></el-checkbox>
                        </div>
                        <div class="col2">
                            <div class="img">
                                <el-image :src="item.product_img" style="width: 80px; height:80px"></el-image>
                            </div>
                            <div class="i_text">
                                <div class="t_name">
                                    <span class="n_tip" v-if="item.shop_type == 2">品牌</span>
                                    <img class="di_icon" v-if="item.exclusive" src="@/assets/team_img/dj_icon.png"
                                        alt="">
                                    <span class="product_name">
                                        {{ item.product_name }}
                                    </span>
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">
                                            {{ item.product_id }} 复制
                                            <i class="el-icon-copy-document" style="cursor: pointer"
                                                @click="copyval(item.product_id)"></i>
                                        </div>
                                        <div class="goodsmy-r-one-r">ID</div>
                                    </el-tooltip>
                                </div>
                                <div class="t_span"><span>{{
                                        item.category_name
                                }}</span></div>
                                <div class="t_tip">
                                    <div>服务费率：{{ item.service_rate / 100 || 0 }}%</div>
                                    <div>佣金率：{{ item.commission_rate / 100 || 0 }}%</div>
                                    <div>售价：¥{{ item.product_price / 100 || 0 }}</div>
                                    <div v-if="item.promote_remain">
                                        推广时间：{{ item.promote_remain }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="loading" v-show="listLoading">
                        <p>正在加载中...</p>
                    </div>
                    <div class="loading" v-show="end">
                        <p>已经到底了...</p>
                    </div>
                </div>

        // 商品列表
        getList() {
            const data = {
                activity_id: this.info.activity_id,
                keyword: this.keyword,
                page: this.page,
                limit: 20,
            }
            this.listLoading = true
            originUnappliedProduct(data).then(res => {
                this.listLoading = false
                if (res.code == 1) {
                    this.total = res.data.total
                    res.data.data.forEach(item => {
                        this.$set(item, "checked", false)
                    })
                    this.list1 = this.list1.concat(res.data.data)
                    // if (res.data.data.length < 20) {
                    //     this.end = true
                    // }
                    if (this.list1.length == this.total) {
                        this.end = true
                    }
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 下拉加载
        load() {
            if (this.loadShowLeft || this.listLoading) {
                return
            }
            this.page++
            this.getList()

        },
        // 勾选当前行
        getCurrentRow(row) {
            if (row.checked) {
                this.$set(row, "checked", true)
            } else {
                this.$set(row, "checked", false)
            }
            this.checkAll = false
        },
        // 全选
        handleCheckAllChange(val) {
            if (val) {
                this.list1.forEach(item => {
                    this.$set(item, "checked", true)
                })
            } else {
                this.list1.forEach(item => {
                    this.$set(item, "checked", false)
                })
            }
        },

https://element.eleme.cn/#/zh-CN/component/infiniteScroll