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