uniapp H5 实现上拉刷新 以及 下拉加载

uniapp H5 实现上拉刷新 以及 下拉加载

1. 先上图

下拉加载

2. 上代码

<script>import DragableList from "@/components/dragable-list/dragable-list.vue";import {FridApi} from '@/api/warn.js'export default {data() {return {tableList: [],loadingHide: false,isRefreshing: false,loadMoreStatus: 'loading', // loading | more | noMorepageSize: 10,pageNum: 1}},components: {DragableList},mounted() {//获取告警列表this.getWarnList()this.loadMoreStatus = 'loading'},methods: {// 下拉刷新refreshList() {this.getWarnList(true)},// 上拉加载loadMore() {console.log('list loadMore');if (this.tableList.length >= this.total){this.loadMoreStatus = 'noMore'return}this.pageNum++this.getWarnList()},//获取告警列表getWarnList(isReload = false) {this.loadingHide = truethis.loadMoreStatus = 'loading'// 请将该方法中的请求 更换为你自己的请求const params = {pageSize: this.pageSize,pageNum: this.pageNum,noiseReductionStatus: '0',alarmIsRecovery: '0',alarmSourceId: uni.getStorageSync('alarmSourceId'),}if (isReload) {this.pageNum = 1this.isRefreshing = truethis.tableList = []}let list = []let baseLen = this.tableList.lengthFridApi.warnList(params).then((result) => {this.loadingHide = trueconst res = resultif (res.code === 0 && res.data) {// 一下代码比较重要const data = res.datalist = data.listconst total = data.totalthis.tableList.push(...list)this.total = totalif (this.tableList.length >= this.total) {this.loadMoreStatus = 'noMore'} else {this.loadMoreStatus = 'more'}this.isRefreshing = false}}).finally(() => {this.loadingHide = false})}}}
</script><template><view class="mp-count-alarmin"><!-- 告警列表 --><dragable-list v-if="!hideShow" :is-refreshing="isRefreshing" :load-more-status="loadMoreStatus"@loadMore="loadMore" @refresh="refreshList"><view class="mp-count-alarmin-top" v-for="item in  tableList">......... 此处请写你自己的样式代码</view></dragable-list></view>
</template>

2. 上组件 dragable-list.vue（复制可直接用）

<script>
import UniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue";/*** 区域滚动组件，支持上拉加载和下拉刷新。* 滚动区域高于页面会导致滚动异常，优先级高于页面滚动，不建议用于页面滚动。* */
export default {name: "dragable-list",components: {UniLoadMore},emits: ['refresh', 'loadMore'],props: {/*** 正在刷新，为 true 时重置滚动条* @value {boolean}* */isRefreshing: {type: Boolean,default: false},/*** 加载更多状态* @value {string} more | noMore | loading* */loadMoreStatus: {type: String,default: 'noMore'},/*** 刷新时候返回顶部* @value {boolean} true* */backTopOnRefresh: {type: Boolean,default: true},},data() {return {scrollTop: 0}},watch: {isRefreshing(newVal) {if (newVal === true && this.backTopOnRefresh) {this.scrollTop = 0}}},methods: {handleScroll(e) {const {scrollTop} = e.detailthis.scrollTop = scrollTop},handleRefresh() {if (this.isRefreshing) returnif (this.loadMoreStatus === 'loading') returnthis.$emit('refresh')this.scrollTop = 0},loadMore() {if (this.isRefreshing) returnif (this.loadMoreStatus === 'more') {this.$emit('loadMore')}}},
}
</script><template><scroll-viewclass="dragable-list"scroll-ystyle="height: 100%"refresher-background="transparent":refresher-threshold="100"lower-threshold="0":scroll-top="scrollTop":refresher-triggered="isRefreshing"refresher-enabledenable-back-to-topshow-scrollbar@scroll="handleScroll"@refresherrefresh="handleRefresh"@scrolltolower="loadMore"><slot></slot><uni-load-more v-if="loadMoreStatus!='noMore'" :status="loadMoreStatus" @clickLoadMore="loadMore"></uni-load-more></scroll-view>
</template><style scoped>
.dragable-list {max-height: 100vh;
}
</style>

3. 组件使用需要引入uni-ui
4. 
   
5. 搞定！