It is available on the official website, and I will briefly record it in this article. When you need it, just copy it here, and you don’t need to go to the official website.
Pull down to refresh
This is used to listen to the page user's pull-down refresh event.
First of all, in pages.json, you need to pull down and refresh the page, and configure enablePullDownRefresh to true in the style (to pages.json find the pages node of the current page in the style, and style enable it in the options enablePullDownRefresh), and then use the onPullDownRefresh callback function on the specific page. OK. Finally, after processing the data refresh, uni.stopPullDownRefresh you can stop the pull-down refresh of the current page.
Official website: 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() // 停止当前页面刷新
},
pull-up bottoming load
Just configure onReachBottomDistance in style. The distance from the bottom of the page when the page pull bottom event is triggered, the unit only supports px
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "PULLANDREACHDEMO",
"enablePullDownRefresh": true, // 下拉刷新
"onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离 触底加载
}
}
Then the callback in the page
// 触底加载
onReachBottom() {
console.log('触底加载-->>')
this.status = 'loading'
setTimeout(() => {
this.status = 'nomore'
this.pageNo++
this.getPageData()
}, 500)
},
complete 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>
Effect
