在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue-scroller如何手動調(diào)取(重新開啟)上拉加載方法

vue-scroller如何手動調(diào)?。ㄖ匦麻_啟)上拉加載方法

列表頁面需要做上拉加載,我采用了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>

我如何手動調(diào)起vue-scroller的上拉加載方法(重新開啟)?

回答
編輯回答
焚音

您好 我也遇到了同樣的問題 我也是這樣寫的 但是只有第一次加載而已 后面就不加載了

2018年3月27日 12:56
編輯回答
病癮

綁定它的onRefresh事件來再次加載數(shù)據(jù)

2017年8月1日 05:43