Está disponible en el sitio web oficial, y lo registraré brevemente en este artículo. Cuando lo necesite, simplemente cópielo aquí, y no necesita ir al sitio web oficial.
Tire hacia abajo para refrescar
Esto se usa para escuchar el evento de actualización desplegable del usuario de la página.
En primer lugar, en pages.json, debe desplegar y actualizar la página, y configurar enablePullDownRefresh en verdadero en el estilo (para pages.json encontrar el nodo de páginas de la página actual en el estilo y style habilitarlo en las opciones enablePullDownRefresh), y luego use la función de devolución de llamada onPullDownRefresh en la página específica. Finalmente, después de procesar la actualización de datos, uni.stopPullDownRefresh puede detener la actualización desplegable de la página actual.
Sitio web oficial: https://uniapp.dcloud.net.cn/api/ui/pulldown.html#
páginas.json：
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "PULLANDREACHDEMO",
"enablePullDownRefresh": true // 开启下拉刷新
}
}
// 下拉刷新
async onPullDownRefresh() {
console.log('下拉刷新-->>')
this.dataListAll = await this.loadmore()
this.getPageData()
uni.stopPullDownRefresh() // 停止当前页面刷新
},
carga de fondo de tracción
Simplemente configure onReachBottomDistance con estilo. La distancia desde la parte inferior de la página cuando se activa el evento de extracción de la parte inferior de la página, la unidad solo admite px
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "PULLANDREACHDEMO",
"enablePullDownRefresh": true, // 下拉刷新
"onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离 触底加载
}
}
Luego la devolución de llamada en la página.
// 触底加载
onReachBottom() {
console.log('触底加载-->>')
this.status = 'loading'
setTimeout(() => {
this.status = 'nomore'
this.pageNo++
this.getPageData()
}, 500)
},
demostración completa
<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>
Efecto
