小程序头部可选择

<!-- 头部 -->

<view class='head'>

<view data-order='1' bindtap='clickorder'><text class='{{a}}'>售中</text></view>

<view data-order='2' bindtap='clickorder'><text class='{{b}}'>已售</text></view>

</view>

/* //顶部 */

.head {

position: relative;

width: 100%;

height: 60rpx;

flex-direction: row;

display: flex;

align-items: center;

/* left: -20rpx; */

border-bottom: 1.4px #e6e6e6 solid;

border-top: 1.4px #e6e6e6 solid;

}

.head view {

position: relative;

/* margin-left: 52rpx; */

font-size: 27rpx;

color: #414141;

display: flex;

justify-content:center;

width: 50%;

}

.line{

border-bottom:1.4px #414141 solid;

}


 

data: {

a: 'line',

b: '',

},

// 头部

clickorder(e) {

var that = this

console.log(e)

var id = e.currentTarget.dataset.order

if (id == 1) {

that.setData({

a: 'line',

b: '',

c: '',

d: '',

e: '',

f: '',

})

} else if (id == 2) { //待付款

var that = this

that.setData({

a: '',

b: 'line',

c: '',

d: '',

e: '',

f: '',

})

}

},

猜你喜欢

转载自blog.csdn.net/qq284944970/article/details/81360195