vue-scroller如何手动调取（重新开启）上拉加载方法

Question

列表页面需要做上拉加载，我采用了vue-scroller,如何在上拉加载关闭后，再次开启上拉加载效果？

main.js

import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

列表页面：

    <template>
<div class="mui-content pro-list-box" v-if="login == true">
    <scroller ref="myscroller" :on-infinite="infinite" no-data-text="没有更多商品哦">
        <!-- :on-infinite="infinite"-->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-if="items.length > 0" v-for="item in items">
                <router-link :to="{name:'detail',params:{id:item.id}}">
                    <img class="mui-media-object mui-pull-left" :src="item.image | formatImg">
                    <div class="mui-media-body">
                        <h4 class="mui-ellipsis-2">{{item.name}}</h4>
                        <p>￥<span>{{item.price}}</span></p>
                    </div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media" style="background: #f7f7f7;"></li>
        </ul>
    </scroller>
    <div class="shop-car">
        <router-link to="/shopcar/">
            <img src="../assets/images/shop-car.png" />
            <span class="mui-badge mui-badge-warning">{{carNum}}</span>
        </router-link>
    </div>
</div>

</template>

<script>

import { formatDate, formatImg } from '../utils/format.js'; //日期格式化
import Router from 'vue-router'

export default {
    name: 'list',
    data() {
        return {
            page: 0,
            size: 15,
            id: '',
            carNum: 0,
            items: [],
            noData: '',
        }
    },
    mounted() {
        document.title = this.$route.params.name;
        this.id = this.$route.params.id;

    },
    methods: {
        //推荐商品列表
        infinite(done) {
            if(this.noData) {
                setTimeout(() => {
                    this.$refs.myscroller.finishInfinite(2);
                })
                return;
            }

            var self = this;
            setTimeout(() => {
                self.$post(self.$api.productList, {
                    pageSize: self.size,
                    pageNum: self.page + 1,
                    isTop: '',
                    productTypeId: this.$route.params.id
                }).then((response) => {
                    var data = response.data.list;
                    for(var i = 0; i < data.length; i++) {
                        self.items.push(data[i]);
                    }
                    if(data.length < self.size) {
                        self.noData = "没有更多商品啦"
                    }
                    self.$route.meta.keepAlive = true;
                    self.page = self.page + 1;
                    self.$refs.myscroller.resize();
                    done();
                })
            }, 1500)
        }
    },

    filters: {
        formatImg(url) {
            return formatImg(url);
        }
    },
}

</script>

我如何手动调起vue-scroller的上拉加载方法（重新开启）？

Answer 1

您好 我也遇到了同样的问题 我也是这样写的 但是只有第一次加载而已 后面就不加载了

Answer 2

绑定它的onRefresh事件来再次加载数据

Answer 3

这种写法我不知道生不生效，我换了另外一种写法，参考的这个文章https://blog.csdn.net/zu_ge/a...

在你的点击事件里重新调用this.loadMore();page也要在这里重新初始化一下;

getfunc(){
this.loading=true;

if(this.loading == true){

把上面那个文章里的done(true)换成 that.$refs.my_scroller.finishInfinite(true);
}

}

大致就是这样，然后就点击重新开启加载更多了