<template> <div class="homeBox"> 會議廣場 <nut-scroller :is-un-more="isUnMore1" :is-loading="isLoading1" :type="'vertical'" :stretch="50" :propsTime="500" :pulldownTxt="'下拉刷新1'" :loadMoreTxt="'上拉加載1'" :unloadMoreTxt="'沒有更多了1'" @loadMore="loadMoreVert" @pulldown="pulldown" > <div slot="list" class="nut-vert-list-panel"> <div class="nut-vert-list-item" v-for="(item, index) of listData1" :key="index"> <dl class="nut-scroller-item-info"> <dt>防水升級版 藍牙音箱 低音炮 IPX7設計 戶外便攜音響 迷你小音</dt> <dd>2018-02-25</dd> </dl> </div> </div> </nut-scroller> </div> </template> <script> export default { computed: { }, data(){ return{ listData1: new Array(20), isUnMore1: false, isLoading1: false, page1: 2, maxPages2: 1, timers: null, } }, created(){ }, methods: { loadMoreVert() { this.isLoading1 = true; if (this.page1 > this.maxPages) { this.isUnMore1 = true; this.isLoading1 = false; } else { clearTimeout(this.timers); this.timer = setTimeout(() => { this.isLoading1 = false; this.isUnMore1 = false; this.listData1 = new Array(20 * this.page1); this.page1 = ++this.page1; }, 300); } }, pulldown() { this.isLoading1 = true; clearTimeout(this.timers); this.timer = setTimeout(() => { this.isLoading1 = false; this.isUnMore1 = false; this.listData1 = new Array(20); this.page1 = 2; }, 3000); }, }, } </script> <style scoped lang="scss"> .homeBox{ position: absolute; top:0; left:0; bottom:70px; right:0; } </style>
文檔地址:http://nutui.jd.com/#/Scroller
。