《微信小程序案例3》使用wx:for + js里面数据绑定data实现多个类似view的方法

实现效果：

左侧菜单栏是多个类似view实现的

一、一般方法

<scroll-view style="height:  calc(100vh);width:25vw;" scroll-y >
  <view class="fa">
    <view class="son"><span>推荐</span></view>
    <view class="son"><span>Xiaomi手机</span></view>
    <view class="son"><span>Redmi手机</span></view>
    <view class="son"><span>游戏手机</span></view>
    <view class="son"><span>电脑平板</span></view>
    <view class="son"><span>智能穿戴</span></view>
    <view class="son"><span>电视</span></view>
    <view class="son"><span>大家电</span></view>
    <view class="son"><span>小家电</span></view>
    <view class="son"><span>智能家居</span></view>
    <view class="son"><span>出行运动</span></view>
    <view class="son"><span>日用百货</span></view> 
    <view class="son"><span>儿童用品</span></view> 
  </view>
</scroll-view>

缺点：发现使用了很多个view来实现，代码冗余了

二、使用wx:for+js里面数据绑定实现

<scroll-view style="height:  calc(100vh);width:25vw;" scroll-y >
  <view class="fa">
    <view class="son" wx:for="{
   
   {itemList}}"><span >{
   
   {item.name}}</span></view> 
  </view>
</scroll-view>

 三、详细解释

wx:for是用来循环数组的，代码中 wx:for="{ {itemList}}" 表示循环itemList这个数组，而这个数据我们在js里面已经数据绑定了。

这里itemList数组里面每个的存储的是一个对象，而如何获取数组中每个对象里面的某个值？？

使用item，item代表当前循环的对象。{ {item.name}}