微信小程序
wxml代码
<view class='list'>
<block wx:for='{{dataList}}' wx:key='list' wx:for-item="item">
<view class="list_item">
<navigator url='{{item.goods_id}}' bindtap="navigateToPage" data-name='{{item.goods_title}}' id='{{item.goods_id}}' data-showType='{{item.showType}}'>
<view class='img'>
<image src="{{item.goods_img}}" mode="scaleToFill"/>
</view>
<view class='info'>
<view class='title'>{{item.goods_title}}</view>
<view class='score'>评分:{{item.goods_score}}</view>
<view class='actor'>导演:{{item.goods_director}}</view>
<view class="actor">主演:{{item.goods_actor}}</view>
<view class="price">价格:¥{{item.goods_price}}</view>
</view>
</navigator>
<view class='clear'></view>
</view>
</block>
</view>
其中 wx:for='{{dataList}}'
是要显示的js中的数组名,wx:for-item="item"
是下面{{item.goods_title}}
要加的前缀,bindtap="navigateToPage"
是绑定的触发事件名
JS代码
Page({
/**
* 页面的初始数据
*/
data: {
dataList:[
{
goods_id:1,
goods_title:'你好,李焕英',
goods_img:'../img/movie1.png',
goods_score:'9.5',
goods_director:'贾玲',
goods_actor:'贾玲,张小斐,沈腾...',
goods_price:100
},{
goods_id:2,
goods_title:'人潮汹涌',
goods_img:'../img/movie2.png',
goods_score:'9.1',
goods_director:'饶晓志',
goods_actor:'刘德华,肖央,万茜...' ,
goods_price:100
}, {
goods_id:3,
goods_title:'唐人街探案3',
goods_img:'../img/movie3.png',
goods_score:'8.8',
goods_director:'陈思诚',
goods_actor:'王宝强,李昊然,妻夫木聪...'
,
goods_price:100
}, {
goods_id:4,
goods_title:'刺杀小说家',
goods_img:'../img/movie4.png',
goods_score:'8.6',
goods_director:'路阳',
goods_actor:'雷佳音,杨幂,董子健...',
goods_price:100
}, {
goods_id:5,
goods_title:'封神榜:哪吒重生',
goods_img:'../img/movie5.png',
goods_score:'8.7',
goods_director:'赵霁',
goods_actor:'杨天翔,张赫,宣晓鸣...',
goods_price:100
}
],
},
onLoad(){
// 事件处理函数
navigateToPage:function(e) {//e是获取到的点击数据
console.log(e.currentTarget.id)
console.log(e.currentTarget.dataset.name);
for(var index in this.data.dataList){//循环遍历数组, if(e.currentTarget.id==this.data.dataList[index]. goods_id){//如果点击的下标与电影id对应
wx.setStorageSync('movie', this.data.dataList[index])//则将该电影数组以键值对方式存入缓存
console.log(this.data.dataList[index])
}
}
}
})
效果展示: