https://www.cnblogs.com/lxz-blogs/p/12599475.html [TOC] ## 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> ~~~