原文:uni-app 下拉刷新 上拉加载 - 秃了头也不退休 - 博客园首先在page页面设置enablePullDownRefresh属性 激活下拉 { "path": "pages/index/index", "styhttps://www.cnblogs.com/lxz-blogs/p/12599475.html看了后,确实可以,随保存,便于查阅。
首先在page页面设置enablePullDownRefresh属性 激活下拉
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh":true
}
}
index.vue
<template>
<view>
<view v-for="(item,index) of newList" :key="index" class="newList">
{{item}}
</view>
<view class="loading">{{loadingTxt}}</view>
</view>
</template>
<script>
let page=1,timer=null
export default {
data() {
return {
newList:[],
loadingTxt:'加载更多'
}
},
onLoad(e) {
this.getNews()
},
onPullDownRefresh() {
//下拉的生命周期
this.getNews()
},
onReachBottom() {
//阻止重复加载
if(timer !== null){
clearTimeout(timer)
}
timer=setTimeout(()=>this.getMoreNews(),500)
// this.getMoreNews()
},
methods: {
//下拉刷新事件
getNews(){
page=1
//标题读取样式激活
uni.showNavigationBarLoading()
uni.request({
url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=List1&page=1',
success: (res) => {
this.newList=res.data.split('--hcSplitor--')
//停止下拉样式
uni.stopPullDownRefresh()
//隐藏标题读取
uni.hideNavigationBarLoading()
page++
}
})
},
//加载更多的新闻
getMoreNews(){
this.loadingTxt='加载中'
uni.showNavigationBarLoading()
uni.request({
url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=List1&page='+page,
success: (res) => {
if(res.data===null){
this.loadingTxt="已经加载全部"
return
}
this.newList=this.newList.concat(res.data.split('--hcSplitor--'))
// this.newList=[...this.newList,res.data.split('--hcSplitor--')]
//停止下拉样式
uni.stopPullDownRefresh()
//隐藏标题读取
uni.hideNavigationBarLoading()
page++
}
})
},
}
}
</script>
<style>
.newList{
line-height: 2em;
padding: 20px;
}
.loading{
line-height: 2em;
text-align: center;
color: #888;
margin-top: 30rpx;
}
</style>