初入微信小程序项目样式问题

Question

如何实现上图中点击高亮，不同的切换，点击高亮的效果，这个问题该怎么解决？有谁知道吗

Answer 1

第一步: 定义一个class，设置样式为你想要的结果

.active { 你想要的样式 }

第二步：在节点中添加 data-index='图中节点的顺序'，并添加点击事件 bindtap='changeTab'

<view class='box {{tabIndex == 1? "active" : ""}}' data-index='1' bindtap='changeTab'>第一个盒子</view>
<view class='box {{tabIndex == 2? "active" : ""}}' data-index='2' bindtap='changeTab'>第二个盒子</view>
<view class='box {{tabIndex == 3? "active" : ""}}' data-index='3' bindtap='changeTab'>第三个盒子</view>

第三步：在data中定义变量 tabIndex，默认设置为 -1

data: {
  tabIndex: -1
}

第四步：点击事件逻辑，点击节点时，将tabIndex设置为当前点击的节点

changeTab(e) {
  this.setData({
    tabIndex: e.currentTarget.dataset.index
  })
}