wxml中:
<view class="zixun">
<view wx:for="{{ziXun}}" data-id="{{index}}" wx:key="key" bindtap="xuan" class="zi">
<button class="{{index==id?'cha':'wen'}}">{{item}}</button>
</view>
</view>
wxss中:
.zixun {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 4%;
}
.zi {
border: 1px solid #1F467D; /* 使用1rpx会导致边框显示不完整,也可2rpx以上 */
border-radius: 15rpx;
width: 42%;
}
.wen {
color: #1F467D;
background-color: white;
}
.cha {
color: white;
background-color: #1F467D;
}
js中:
Page({
data: {
ziXun: [
"免费问诊",
"余号查询"
],
id: 1 //默认选中第2个,下标为1
},
xuan:function(e){
var id = e.currentTarget.dataset.id; //获取自定义id值
this.setData({
id : id
})
}
})
效果如下: