[TOC] ## 1. 導航條加載 ``` wx.showNavigationBarLoading wx.hideNavigationBarLoading() ``` ## 2.下拉加載`onReachBottom` ### 2.1 數據請求處理 ``` onReachBottom(){ //在data里要設置一個start:0 為start設置一個初始值 this.data.start+=20 ; var count = "?start=" + this.data.start + "&count=20"; //獲取data里的type var type = this.data.type; var url = douban + type + count; http(url,this.addData) ///方法二 http(url,this.handleData) wx.showLoading({ title: '加載中', }) } ``` ### 2.2 數據添加處理 #### 方法一 ``` addData(res){ var data = res.data; var movies = list(data.subjects); this.setData({ movies:this.data.movies.concat(movies) }) wx.hideLoading() }, ``` #### 方法二 ``` handleData(res){ //獲取數據 var data = res.data; var movies = list(data.subjects); //在data增加isEmpty:true //判斷當前頁面是否為空 選擇添加還是重載 if(this.data.isEmpty){ this.setData({ movies, title, isEmpty:false }) }else{ this.setData({ movies:this.data.movies.concat(movies) }) } wx.hideLoading() }, ``` ## 3.組件里下拉加載`scroll-view` ### 3.1 scroll-view 標簽 ``` <scroll-view class="scroll-view" scroll-x="{{false}}" scroll-y="{{true}}" bindscrolltolower="onScroll" > ``` ``` <!-- 設置搜索結果 --> <scroll-view class="scroll-view" scroll-x="{{false}}" scroll-y="{{true}}" bindscrolltolower="onScroll" wx:if="{{isSearch}}"> <view class="result" wx:key="{{index}}"> <block wx:for="{{books}}" wx:key=""> <v-book book="{{item}}"></v-book> </block> </view> </scroll-view> ``` ### 3.2 函數處理 ``` onScroll() { this._loadmore(); }, //加載更多數據 _loadmore() { /* 加載更多數據 */ var start = this.data.books.length; var value = this.data.value; //如果 start>數據總長就停止發請求 if (start < this.data.total) { 設置加載狀態像微信朋友圈加載一樣 this.setData({ isLoading: true }) //發送請求 bookModel.getBookSearch(start, value).then(res => { //將請求添加至已有數組 let arr = this.data.books.concat(res.books) this.setData({ books: arr, isLoading: false }) wx.hideLoading() }) } //數據取完 else { wx.showModal({ title: '沒有更多數據了', }) } } ```