单选tab标签及样式

小程序开发中，经常遇到页签或是一些标签的单选功能，如下：

（1）头部页签

（2）分类选择

这两种情况一样，以第二种为例：

wxml：

<view class='filter'>

    <view wx:for='{{category}}' class='{{tabflag==index?"tabhover":""}}' bindtap='changetab' data-index='{{index}}'>          {{item.name}}</view>

</view>

wxss：

.tabhover {

    color: #FE4516 !important;

    border-bottom: 3px solid #FE4516 !important;

} // 设置标签选中样式

js:

data: {

    tabflag: 0, 

    category: ['全部', '连载', '完结']

}

// tab标签选择

changetab(e) {

    this.setData({

        tabflag: e.currentTarget.dataset.index, //设置flag为选择的tab序号

    })

},