vue基於vant封裝上拉載入/下拉重新整理元件ListScroller
阿新 • • 發佈:2021-12-20
components/ListScroller.vue
<template> <van-pull-refresh ref="vanPullRefreshRef" v-model="refreshing" @refresh="onRefresh" :style="{height: listHeight}"> <van-list v-model="loading" @load="onLoad" offset='300'> <slot></slot> </van-list> </van-pull-refresh> </template> <script> export default { name: 'ListScroller', props: { height: { type: String | Number, default: '' } }, watch: { height: { handler(val) { this.setListHeight(Math.abs(val)) }, immediate: true } }, data() { return { loading:false, // 載入更多 refreshing: false, // 重新載入 listHeight: '' // 容器高度 可傳 66 -66 '66' '-66' 全屏高度則不傳 } }, methods: { setListHeight(height) { const h = height ? document.documentElement.clientHeight - height + 'px' : '100%' this.listHeight = h }, onRefresh() {this.$emit('on-pulldown-loading', () => { this.refreshing = false // 下拉重新整理成功後關閉頂部重新整理狀態 }) }, onLoad() { this.$emit('on-pullup-loading', () => { this.loading = false // 上拉載入成功後關閉底部載入狀態 }) } } } </script> <style lang="less" scoped> .van-pull-refresh { overflow-y: auto; -webkit-overflow-scrolling: touch; } </style>
使用:
1、引入&註冊:
import ListScroller from '@/components/ListScroller'
components: { ListScroller }
2、data&methods
data() { return { queryParams: { page: 1, pageSize: 10 }, totalRecords: '', feedbackList: [] } }
async getFeedbackList() { this.$toast.loading({message: '載入中...', forbidClick: true, duration: 5}) const { success, data, totalRecords } = await getFeedbackListApi(this.queryParams) if (success) { this.totalRecords = totalRecords if (this.queryParams.page === 1) {this.feedbackList = data } else { this.feedbackList.push(...data) } this.$toast.clear() } }, // 重新整理 refrash(cb) { this.queryParams.page = 1 this.getFeedbackList().then(_ => { cb && cb() }) }, // 載入更多 loadMore(cb) { const { feedbackList, totalRecords } = this if (totalRecords > feedbackList.length) { this.queryParams.page++ this.getFeedbackList().then(_ => { cb && cb() // 也可以通過ref設定子元件中狀態值 this.$refs.listScrollerRef.loading = false }) } else { cb && cb() } }
3、DOM:
<ListScroller height='-66' @on-pulldown-loading="refrash" @on-pullup-loading="loadMore"> <div class="scroller-container" v-if="feedbackList.length > 0"> <van-swipe-cell left-width='0' v-for="item in feedbackList" :key="item.id"> <div class="feedback-card" @click="handleDetails(item.id)"> <p>{{item.title}}</p> <p>{{item.projectName}}</p> <p v-if="item.area">{{item.area}}</p> <div> <p><van-icon name="location" /><span>{{item.visitPlanTitle}}</span></p> <p>{{item.visitTime}}</p> </div> </div> <template #right> <van-button text="編輯" @click="handleEdit(item)" /> <van-button text="刪除" @click="handleDelete(item.id)" /> </template> </van-swipe-cell> </div> <div v-else class="empty-data">暫無資料</div> </ListScroller>