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