需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh。
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true //配置为true
}
}
<template>
<view>
<view v-for="(item,index) in newList" :key="index">{{item}}</view>
</view>
</template>
<script>
var page=1,timer=null;
export default{
data(){
return{
newList:[]
}
},
onLoad(){
this.getList() //第一次加载数据
},
onPUllDownRefresh(){ //触发上拉刷新函数
if(timer != null){ //为防止回弹多次触发刷新
clearTimeout(timer)
}
timer=setTimeout(()=>{
this.getList()
},500)
},
onReachBottom(){ //监听页面触底函数
if(timer != null){ //为防止回弹多次触发刷新
clearTimeout(timer)
}
timer=setTimeout(()=>{
getMoreList()
},500)
},
methods:{
//上拉加载更多
getMoreList(){
uni.showNavigationBarLoading(); //导航栏显示加载动画
uni.request({
url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
method:'GET',
success:res=>{
console.log(res)
uni.hideNavigationBarLoading(); //导航栏停止加载动画
if(res.data=null){
return false
}
this.newList=this.newList.concat(res.data) //拼接数组
uni.stopPUllDownRefresh(); //停止刷新
page++
}
})
},
//下拉刷新
getList(){
page=1
uni.showNavigationBarLoading(); //显示加载动画
uni.request({
url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
method:'GET',
success:res=>{
console.log(res)
this.newList=res.data
uni.hideNavigationBarLoading(); //停止加载动画
uni.stopPUllDownRefresh(); //停止刷新
page++
}
})
}
}
}
</script>
<style>
</style>