案例演示
代码
<view class="tabBox">
<scroll-view class="scrollRow" scroll-x="true" scroll-left="120">
<view class="monthTab">
<!-- 循环体start -->
<block v-for="(item,index) in monthList" :key="index">
<view class="month" :class="index == current?'addCss':''" @click="chooseMonth(index)">{
{item.date}}</view>
</block>
<!-- 循环体end -->
</view>
</scroll-view>
</view>
data() {
return {
status: 0,
monthList: [{
value: 1,
date: '10月'
}, {
value: 2,
date: '11月'
}, {
value: 3,
date: '12月'
}, {
value: 4,
date: '1月'
}, {
value: 5,
date: '2月'
}, {
value: 6,
date: '3月'
}, {
value: 7,
date: '4月'
}, {
value: 8,
date: '5月'
}],
current:0
}
},
methods: {
chooseMonth(index){
this.current = index
}
}
.tabBox {
margin: 0 22rpx;
padding: 9rpx 15rpx;
height: 92rpx;
background: #FFFFFF;
box-shadow: 0px 5rpx 16rpx 0px rgba(216, 216, 216, 0.42);
border-radius: 20rpx;
}
.scrollRow {
height: 100%;
// border: 1px solid red;
display: flex;
justify-content: space-between;
align-items: center;
.monthTab {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.month {
flex-shrink: 0;
font-size: 28rpx;
color: #181818;
width: 114rpx;
text-align: center;
line-height: 74rpx;
height: 74rpx;
}
.addCss {
background: #56B6A3;
border-radius: 20rpx;
font-weight: bold;
color: #FFFFFF;
}
}
}
网址
scroll-view标签
https://uniapp.dcloud.net.cn/component/scroll-view.html