<view class="form-btn {{currentIndex==1?'form-active':''}}" id="1" bindtap="onDay">今 日</view>
<view class="form-btn {{currentIndex==2?'form-active':''}}" id="2" bindtap="onDay" style="float: right;">昨 日</view>
.form-btn {
position: relative;
display: inline-block;
height:36px;
width: 40%;
text-align: center;
line-height: 36px;
border-radius: 5px;
background: #eee;
color: #777;
}
/* 选中时添加这个 样式 */
.form-active {
background: #dae9fd;
color: #23b8ff;
}
/* 三角形 */
.form-active::before {
content: '';
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 20px solid #23b8ff;
border-left: 20px solid transparent;
}
/* 小勾 */
.form-active::after {
content: '';
position: absolute;
right: 1px;
bottom: 5px;
width: 8px;
height: 4px;
display: inline-block;
border: 1px solid #fff;
border-width: 0 0 1px 1px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
vertical-align: baseline;
}
Page({
data: {
currentIndex: 1
},
onDay: function(e) {
// 选中某个
var that = this;
that.setData({
currentIndex: e.currentTarget.id
})
},
})