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 | noMore
				pageSize: 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 = true
				this.loadMoreStatus = 'loading'
				// 请将该方法中的请求 更换为你自己的请求
				const params = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					noiseReductionStatus: '0',
					alarmIsRecovery: '0',
					alarmSourceId: uni.getStorageSync('alarmSourceId'),
				}
				if (isReload) {
					this.pageNum = 1
					this.isRefreshing = true
					this.tableList = []
				}
				let list = []
				let baseLen = this.tableList.length

				FridApi.warnList(params)
					.then((result) => {
						this.loadingHide = true
						const res = result
						if (res.code === 0 && res.data) {
						   // 一下代码比较重要
							const data = res.data
							list = data.list
							const total = data.total
							this.tableList.push(...list)
							this.total = total
							if (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.detail
      this.scrollTop = scrollTop
    },
    handleRefresh() {
      if (this.isRefreshing) return
      if (this.loadMoreStatus === 'loading') return
      this.$emit('refresh')
      this.scrollTop = 0
    },
    loadMore() {
      if (this.isRefreshing) return
      if (this.loadMoreStatus === 'more') {
        this.$emit('loadMore')
      }
    }
  },
}
</script>

<template>
  <scroll-view
      class="dragable-list"
      scroll-y
      style="height: 100%"
      refresher-background="transparent"
      :refresher-threshold="100"
      lower-threshold="0"
      :scroll-top="scrollTop"
      :refresher-triggered="isRefreshing"
      refresher-enabled
      enable-back-to-top
      show-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. 搞定！