微信小程序页面的初始数据data与前端wxml的变量值

微信小程序页面初始数据data与前端wxml的变量值

当我们在wxml前端使用for循环进行列表渲染时，前端wxml的变量为data初始数据的默认子项item

例子1：

js部分

data: {
    navList:[
      {src:"../../image/icon-1.png",text:"商品分类",id:"xx01"},
      {src:"../../image/icon-2.png",text:"领优惠券",id:"xx02"},
      {src:"../../image/icon-3.png",text:"行业资讯",id:"xx03"},
      {src:"../../image/icon-4.png",text:"我要签到",id:"xx04"},
      {src:"../../image/icon-5.png",text:"我的收藏",id:"xx05"},
      {src:"../../image/icon-6.png",text:"秒杀活动",id:"xx06"},
      {src:"../../image/icon-7.png",text:"地址列表",id:"xx07"},
      {src:"../../image/icon-8.png",text:"订单列表",id:"xx08"}
    ]
  },

wxml部分

<view class="nav"> 
        <view class="nav-list">
            <block wx:for="{{navList}}" wx:key="index">
                <view class="nav-list-item" data-id="item.id">
                    <image class="item-img" src="{{item.src}}"></image>
                    <text>{{item.text}}</text>
                </view>
            </block>
        </view>
    </view>

例子2：

js部分

data: {
    navItems:[
      {src:"../../image/icon-1.png",text:"商品分类",id:"xx01"},
      {src:"../../image/icon-2.png",text:"领优惠券",id:"xx02"},
      {src:"../../image/icon-3.png",text:"行业资讯",id:"xx03"},
      {src:"../../image/icon-4.png",text:"我要签到",id:"xx04"},
      {src:"../../image/icon-5.png",text:"我的收藏",id:"xx05"},
      {src:"../../image/icon-6.png",text:"秒杀活动",id:"xx06"},
      {src:"../../image/icon-7.png",text:"地址列表",id:"xx07"},
      {src:"../../image/icon-8.png",text:"订单列表",id:"xx08"}
    ]
  },

wxml部分

<view class="nav"> 
        <view class="nav-list">
            <block wx:for="{{navItems}}" wx:key="index">
                <view class="nav-list-item" data-id="item.id">
                    <image class="item-img" src="{{item.src}}"></image>
                    <text>{{item.text}}</text>
                </view>
            </block>
        </view>
    </view>

由上所示，无论js部分中的初始数据为什么名字，前端wxml部分的变量都为其子项item

附本人的微信公众号：墨轩学习
（我会发布些学习的笔记）