| 下載地址 | | --- | | https://ext.dcloud.net.cn/plugin?id=4489 | * 模板調用 ~~~ <template> <view> <t-refresh ref="refresh" @refresh="refresh" @loadMore="loadMore" :loadingType="loadingType"> <template slot="content"> <view class="refresh-item" v-for="(item,index) in number" :key="index"> {{index}} </view> </template> </t-refresh> <t-toast ref="toast"></t-toast> </view> </template> ~~~ * script調用 ~~~ import tRefresh from "@/components/t-refresh/t-refresh.vue" import tToast from "@/components/t-toast/t-toast.vue" export default { components:{tRefresh,tToast}, data() { let arr = {}; arr.loadingType = 0; arr.number = 20; return arr; }, onLoad() { }, methods: { // 加載更多 loadMore: async function() { //loadingType: 0.數據未加載完 1.數據全部加載完了 2.數據加載中 if(this.loadingType==0){ this.loadingType=2 //模擬數據請求 setTimeout(()=>{ this.number=30 this.loadingType=1 },1000) } }, //刷新 refresh(e){ //模擬數據請求 setTimeout(()=>{ this.$refs.refresh.endRefresh() this.number=20 this.loadingType=0 this.$refs.toast.show('success','更新成功') },1000) }, } } ~~~ * style調用 ~~~ .refresh-item{ height:80upx; line-height: 80upx; text-align: center; border-bottom: 1upx solid #F4F4F4; } ~~~