You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

58 lines
1.2 KiB

<template>
<scroll-view class="scroll-view_w" scroll-x="true" scroll-with-animation :scroll-into-view="'tab'+currentTab" scroll-left="140">
<view class="tabs">
<view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item.id)" :class="{active: currentTab==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
<view class="rightPad"></view>
</view>
</scroll-view>
</template>
<script>
export default {
props: ['tabData', 'currentTab'],
methods: {
changeTab(id) {
this.$emit('changeTab', id)
},
}
}
</script>
<style lang="scss" scoped>
.scroll-view_w {
width: 100%;
margin: 30rpx 0 40rpx 0;
.tabs {
display: flex;
flex-wrap: nowrap;
padding: 0 0rpx 10rpx 32rpx;
width: auto;
.tab {
width: 108rpx;
height: 60rpx;
border-radius: 8rpx;
border: 2rpx solid #FFFFFF;
font-size: 28rpx;
color: #fff;
text-align: center;
line-height: 60rpx;
margin-right: 28rpx;
flex-shrink: 0;
&.active {
background-color: #fff;
color: $themC;
}
&.all {
width: 96rpx;
}
}
.rightPad {
min-width: 10rpx;
height: 60rpx;
}
}
}
</style>