uniapp实现下拉刷新与上拉触底加载功能的示例代码
作者：会说法语的猪
这篇文章主要记录一下uniapp实现下拉刷新与上拉触底加载功能的示例代码，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
下拉刷新
这个用于监听该页面用户下拉刷新事件。
首先在pages.json中需要下拉刷新的页面，在style配置enablePullDownRefresh为true就可以了（要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh），然后在具体页面使用onPullDownRefresh回调函数就可以了。最后在当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
官网：https://uniapp.dcloud.net.cn/api/ui/pulldown.html#
pages.json：
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "PULLANDREACHDEMO",
"enablePullDownRefresh": true // 开启下拉刷新
}
}
// 下拉刷新
async onPullDownRefresh() {
console.log('下拉刷新-->>')
this.dataListAll = await this.loadmore()
this.getPageData()
uni.stopPullDownRefresh() // 停止当前页面刷新
},
上拉触底加载
只需要在style配置onReachBottomDistance 就可以了。页面上拉触底事件触发时距页面底部距离，单位只支持px
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "PULLANDREACHDEMO",
"enablePullDownRefresh": true, // 下拉刷新
"onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离 触底加载
}
}
然后页面中的回调
// 触底加载
onReachBottom() {
console.log('触底加载-->>')
this.status = 'loading'
setTimeout(() => {
this.status = 'nomore'
this.pageNo++
this.getPageData()
}, 500)
},
完整demo
<template>
<view class="index">
<view v-for="(item, index) in dataList" :key="index">
<image :src="item.url" mode=""></image>
<view>列表长度--{{ index + 1 }}</view>
</view>
<u-loadmore :status="status" />
</view>
</template>
<script>
export default {
data() {
return {
pageNo: 1,
pageSize: 20,
dataListAll: [],
dataList: [],
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg',
'https://cdn.uviewui.com/uview/album/3.jpg',
'https://cdn.uviewui.com/uview/album/4.jpg',
'https://cdn.uviewui.com/uview/album/5.jpg',
'https://cdn.uviewui.com/uview/album/6.jpg',
'https://cdn.uviewui.com/uview/album/7.jpg',
'https://cdn.uviewui.com/uview/album/8.jpg',
'https://cdn.uviewui.com/uview/album/9.jpg',
'https://cdn.uviewui.com/uview/album/10.jpg',
],
status: 'nomore'
}
},
async onLoad() {
this.dataListAll = await this.loadmore()
this.getPageData()
},
// 下拉刷新
async onPullDownRefresh() {
this.dataListAll = await this.loadmore()
this.pageNo = 1
this.getPageData()
uni.stopPullDownRefresh()
},
// 触底加载
onReachBottom() {
this.status = 'loading'
setTimeout(() => {
this.status = 'nomore'
this.pageNo++
this.getPageData()
}, 500)
},
methods: {
// 获取分页数据
getPageData() {
let curDataList = this.dataListAll.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
if(curDataList.length) {
this.dataList.push(...curDataList)
}
},
// 模拟请求 获取所有数据
loadmore() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const dataList = []
for (let i = 0; i < 120; i++) {
dataList.push({
url: this.urls[uni.$u.random(0, this.urls.length - 1)]
})
}
resolve(dataList)
}, 500)
})
}
}
}
</script>
<style scoped>
.index {
width: 100%;
height: 100%;
/* overflow: auto;
overflow-x: hidden; */
}
.index > view {
width: 100%;
height: 120rpx;
border-bottom: 1px solid #ccc;
padding-left: 15rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.index > view > image {
width: 100rpx;
height: 100rpx;
border-radius: 12rpx;
margin-right: 10rpx;
}
.index > view > view {
line-height: 120rpx;
font-size: 22rpx;
color: #000000;
}
</style>效果
到此这篇关于uniapp实现下拉刷新与上拉触底加载功能的示例代码的文章就介绍到这了,更多相关uniapp下拉刷新 上拉触底加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！