uniapp H5 实现上拉刷新 以及 下拉加载
1. 先上图
下拉加载
2. 上代码
javascript
<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（复制可直接用）
javascript
<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>- 组件使用需要引入uni-ui
- 搞定！