微信小程序动态数据，点击当前项改变样式

效果图：

wxml文件代码：

<view class='content'>

  <view class='left_menu'>

    <scroll-view scroll-x>

          <block wx:for='{{tabs}}' wx:key>

            <view id='{{index}}' bindtap='tabClick'>

                <block wx:if="{{index == clickId}}">

                  <view class='tab' style='background-color:red;'>{{item}}</view>

                </block>

                <block wx:else>

                  <view class='tab'>{{item}}</view>

                </block>

            </view>

          </block>

      </scroll-view>

  </view>

  <view class='right_content'>

    <text>{{clickItem}}</text>

  </view>

</view>

wxss文件代码

.content{

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: row;

}

.left_menu{

  display: flex;

  flex-direction: column;

  width: 30%;

  line-height: 80rpx;

  align-items: center;

  justify-content: center;

  text-align: center;

  background-color: blueviolet;

}

.tab{

  height: 100rpx;

  width: 100%;

}

.right_content{

  width: 70%;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  background-color: orange;

}

js文件代码

Page({

  data: {

    tabs: ["芹菜", "菠菜", "香菜", "芥菜", "紫菜", "油麦菜", "黄花菜", "生菜", "娃娃菜", "大白菜", "西红柿", "黄瓜", "冬瓜", "南瓜", "鸡蛋"],

    clickId:0,

    clickItem:'芹菜'

  },

  onLoad: function () {

  },

  tabClick:function(res){

    console.log(res)

    this.setData({

      clickId:res.currentTarget.id,

      clickItem:this.data.tabs[res.currentTarget.id]

    })

  }

})