企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[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版一致