0.实现的样式如下
1.页面代码
<view class="top-choose">
<view v-for="(obj,index) in titles" :key="index" @click="chooseThis(index)" class="m-commen-one">
<text :class="chooseWhich==index?'choose gl-color gl-bottom':'not-choose'">
{{obj}}
</text>
</view>
</view>
2.css样式
.top-choose{
height: 114rpx;width: 90%;margin-left: 5%;border-bottom: 1rpx solid lightgray;
}
.top-choose .m-commen-one{
width: 50%;height: 100%;display: inline-block;text-align: center;
}
.top-choose .m-commen-one .choose{
font-size: 28rpx;
display: inline-block;padding-top: 39rpx;padding-bottom: 35rpx;
}
.top-choose .m-commen-one .not-choose{
font-size: 28rpx;padding-top: 39rpx;padding-bottom: 35rpx;display: inline-block;
}
3.js代码
data里面的数据
titles: ["机柜订单", "充电宝订单"],
chooseWhich: 0,
click代码为
chooseThis(index) {
var that = this;
that.chooseWhich = index;
},