[TOC] > 說明：此版本為升級版，在1.0版的基礎上對代碼進行了封裝，添加了一些有趣的東西（下滑時刷新數據以填充頁面，數據刷新等待過程的等待動畫） ## 1.在index.wxml添加loading（加載頁面等待） ~~~ <import src="/template/movie-detail/movie-detail"></import> <!-- 添加的部分 --> <loading hidden="{{show}}"></loading> <view class="container"> <block wx:for="{{data}}" wx:key="index"> <view class="content"> <template is="movieDetail" data="{{...item}}"></template> </view> </block> </view> ~~~ ## 2.在index.js對數據處理部分進行了封裝（編寫函數handleData），添加頁面上拉觸底事件的處理函數（小程序封裝的函數），添加加載頁面等待（小程序頭部顯示） ~~~ //index.js //獲取應用實例 const app = getApp() Page({ data:{ show:false, start: 0, isEmpty: true }, onLoad() { var self = this; wx.request({ url: 'http://douban.uieee.com/v2/movie/top250', method: 'GET', header: { 'Content-Type': 'json' }, success: function (res) { /* 調用函數處理數據 */ self.handleData(res); } }) }, /* 新增數據處理函數 */ handleData(res) { //onLoad數據和onreachbottom數據 var totalData = []; var data = []; var subjects = res.data.subjects; wx: for (const key in subjects) { var imgUrl = subjects[key].images.small; var name = subjects[key].title; // 數據多了之后發現name太長會影響到頁面的排版問題（新增） if(name.length>8){ name = name.slice(0,8); } var average = subjects[key].rating.average; var temp = {}; temp.name = name; temp.imgUrl = imgUrl; temp.average = average; data.push(temp); }; this.setData({ data }); if(!this.data.isEmpty){ totalData = this.data.data.concat(data); this.setData({ data:totalData, show: true }); }else{ this.setData({ data: data, show: true, isEmpty: false }); } wx.hideNavigationBarLoading(); }, // 新增當頁面滑到底部觸發函數 onReachBottom:function(){ // 顯示等待（在小程序頭部） wx.showNavigationBarLoading(); var self = this; this.data.start+=20; var url = "https://douban.uieee.com/v2/movie/top250"; var nextUrl = url+"?start="+this.data.start+"&count=20"; wx.request({ url: nextUrl, header: { 'Content-Type': 'json' }, success: function(res) { self.handleData(res); } }) } }) ~~~ ## 3.其他版塊與1.0版一致