<view class="content-box-scroll" v-show="btnList.length > 0"> <scroll-view scroll-x style="white-space: nowrap; 100%;"> <block v-for="(item, index) in btnList" :key="index"> <view @tap="clickBtnChange(item,index)" class="btn-sty-yel-two" :class="[selectIndex===index ? 'select-bg' : 'no-select-bg']"> <view class="btn-sty-yel-two-childern"> {{item.name}} </view> </view> </block> </scroll-view> </view>
<scroll-view scroll-x style="white-space: nowrap; 100%;">
</scroll-view>
.content-box-scroll {
height: 120rpx;
display: flex;
align-items: center;
}
.btn-sty-yel-two {
display: inline-block; // 非常重要与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度。用通俗的话讲,就是不独占一行的块级元素
height: 60rpx;
200rpx;
border-radius: 5rpx;
margin-left: 10rpx;
margin-right: 10rpx;
.btn-sty-yel-two-childern {
font-size: 30rpx;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
}
.no-select-bg {
border: 1rpx solid #FFFFFF;
color: #FFFFFF;
opacity: 0.8;
}
.select-bg {
color: #5857D7;
background: #FFFFFF;
}