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

最新推荐文章于 2024-03-04 01:17:38 发布

原创最新推荐文章于 2024-03-04 01:17:38 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #微信小程序

本文探讨微信小程序中页面初始数据data如何影响前端wxml的变量值，通过两个实例展示无论js中的data如何命名，wxml中变量默认为item。详细解析了在列表渲染时的数据绑定原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序页面初始数据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>