更新记录
1.0.0(2024-02-21)
下载此版本
自定义上拉刷新、下拉加载
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
使用示例:
<!-- 插槽lowerTxt内,可以自定义下拉加载样式 -->
<!-- 插槽tip内,可以自定义上拉加载样式 -->
<pyshList>
<template v-slot:lowerTxt>
<uni-load-more status="loading"></uni-load-more>
</template>
<template v-slot:list>
<view class="test-list" v-for="(item,index) in list" :key="index">
{{index}}
</view>
</template>
<template v-slot:tip>
<view v-if="loadMore">
<uni-load-more status="loading"></uni-load-more>
</view>
</template>
</pyshList>
<!-- 组件传值 -->
<pyshList :scrollHeight="scrollHeight"></pyshList>
scrollHeight//列表高度
import pyshList from './../../components/pysh-list/pysh-list.vue'
export default {
components:{
pyshList
},
data() {
return {
list:[1,2,3,4,5,6,7,8,9,10],
loadMore:false,
}
},
mounted(){
uni.$on('pyshListState',(res)=>{
if (res.page == 'one') {//下拉刷新逻辑
this.list = [1,2,3,4,5,6,7,8,9,10]
} else if (res.page == 'more') {//上拉加载更多逻辑
this.loadMore = true;
let last = this.list[this.list.length - 1]
console.info('last',last)
let arr = [];
for(let i=0;i<10;i++){
arr.push(last - 0+i-0+1)
}
setTimeout(() => {
this.list = this.list.concat(arr)
console.info('list',this.list)
this.loadMore = false;
},2000)
}
})
},
onLoad() {
},
methods: {
}
}