[https://www.cnblogs.com/lxz-blogs/p/12599475.html](https://www.cnblogs.com/lxz-blogs/p/12599475.html) * [pages.json 设置对应页面，激活下拉](https://www.kancloud.cn/wangking/uniapp/1868615#pagesjson__2) * [代码测试](https://www.kancloud.cn/wangking/uniapp/1868615#_14) ## pages.json 设置对应页面，激活下拉 > 设置enablePullDownRefresh属性，即可激活 ~~~ { "path": "pages/pull_down/index", "style": { "navigationBarTitleText": "上拉下拉测试", "enablePullDownRefresh":true } } ~~~ ## 代码测试 > 需要用到的生命周期有： > > 1. onLoad > 2. onPullDownRefresh > 3. onReachBottom ~~~ <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:[], isTheLastPage:false, loadingTxt:'加载更多' } }, onLoad(e) { this.getInitNews() }, onPullDownRefresh() { //下拉的生命周期 this.getInitNews() }, onReachBottom() { //阻止重复加载 if(timer !== null){ clearTimeout(timer) } timer=setTimeout(()=>this.getMoreNews(),500) // this.getMoreNews() }, methods: { //下拉刷新事件 getInitNews(){ 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(); this.isTheLastPage = false; page++ } }) }, //加载更多的新闻 getMoreNews(){ if (this.isTheLastPage) return; 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="已经加载全部"; //隐藏标题读取 uni.hideNavigationBarLoading(); this.isTheLastPage = true; 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> ~~~