[TOC] > 此版本为豪华版，在2.0版的基础上添加点击页面加载对应页面的图片（很酷） ## 1.在index.wxml添加点击事件 ~~~ <import src="/template/movie-detail/movie-detail"></import> <loading hidden="{{show}}"></loading> <view class="container"> <block wx:for="{{data}}" wx:key="index"> <!-- 添加点击事件获取对应data属性id --> <view class="content" bindtap='handleClick' data-id="{{item.id}}"> <template is="movieDetail" data="{{...item}}"></template> </view> </block> </view> ~~~ ## 2.在index.js添加点击函数（handleClick） ~~~ //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; // 新增id确定对应电影对应的id var id = subjects[key].id; var temp = {}; temp.name = name; temp.imgUrl = imgUrl; temp.average = average; // 将id加入data内 temp.id = id; 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); } }) }, // 新增点击函数获取属性id值 handleClick(event){ var id = event.currentTarget.dataset.id; // 页面间属性传递 wx.navigateTo({ url: '/pages/movie-detail/movie-detail?id='+id }) } }) ~~~ ## 3.添加电影详情页面movie-detail(用于存放对应电影的图片)："pages/movie-detail/movie-detail" movie-detail.js写入 ~~~ // pages/movie-detail/movie-detail.js Page({ onLoad(option) { var self = this; var id = option.id; console.log(option); wx.request({ url: 'https://douban.uieee.com/v2/movie/' + id, header: { 'Content-Type': 'json' }, success: function (res) { var imgUrl = res.data.image; console.log(imgUrl); self.setData({ imgUrl }) } }) } }) ~~~ movie-detail.wxml写入 ~~~ <!--pages/movie-detail/movie-detail.wxml--> <view> <image src="{{imgUrl}}"></image> </view> ~~~ ## 4.其他版块与2.0版一致