[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: '没有更多数据了', }) } } ```