How to manually call (re-open) the pull-up loading method for vue-scroller

The

list page needs to be pulled and loaded. I have adopted vue-scroller, how to turn on the pull-up loading effect again after pull-up loading is turned off?

main.js

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

list page:

    <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>
                        

<span>{{item.price}}</span>

</div> </router-link> </li> <li class="mui-table-view-cell mui-media" style="background: -sharpf7f7f7;"></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; iPP) {
                        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 >

how do I manually adjust the pull-up loading method of vue-scroller (reopen)?

Mar.06,2021

Hello, I have the same problem. I wrote the same thing, but only after the first load, I don't load


bind its onRefresh event to load the data again


I don't know if this method of writing is effective or not. I wrote it in a different way. I refer to this article https://blog.csdn.net/zu_ge/a.

.

re-call this.loadMore (); page in your click event should also be reinitialized here;

getfunc () {
this.loading=true;

if(this.loading == true){

done(true) that.$refs.my_scroller.finishInfinite(true);
}

}

that's about it, and then click to reopen loading more

.
Menu