[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版一致