微信小程序 循环显示列表 并通过 点击获取列表值_小程序数组点击获取当前值

微信小程序
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其中 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])
     }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

效果展示：