uni--横向滑动

?

1 2 3 4 5 6 7 8 9 10 11

<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>

　　

?

1	<scroll-view scroll-x style="white-space: nowrap;width: 100%;">

?

1	</scroll-view>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.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%;     } }

.no-select-bg {
border: 1rpx solid #FFFFFF;
color: #FFFFFF;
opacity: 0.8;
}
.select-bg {
color: #5857D7;
background: #FFFFFF;
}