<view class="content-box-scroll" v-show="btnList.length > 0"> <scroll-view scroll-x style="white-space: nowrap;width: 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;width: 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; width: 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%; } }