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.
81 lines
1.5 KiB
81 lines
1.5 KiB
<template> |
|
<view> |
|
<view class="sele_Bar mar"> |
|
<view :style="{transform:`translateX(calc(${barIndex}*100%))`,width:`calc((100% - 20rpx) / ${seleBarData.length})`}" class="move_item"></view> |
|
<view v-for="(item,index) in seleBarData" @tap="seleBarFn(item,index)" :style="{color:barIndex==index? 'white' : ''}" |
|
class="sele_Bar_item"> |
|
{{item.lable}} |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: "seleBar", |
|
props: { |
|
seleBarData: { |
|
type: Array, |
|
default: () => { |
|
return [] |
|
} |
|
} |
|
}, |
|
created() { |
|
console.log('%c 组件参数↓', 'color:red;font-size:50px') |
|
console.log(this.seleBarData) |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
data() { |
|
return { |
|
barIndex:0 |
|
}; |
|
}, |
|
methods:{ |
|
seleBarFn(item,index) { |
|
this.barIndex = index |
|
this.$emit('seleBarFn',item,index) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.move_item { |
|
position: absolute; |
|
left: 10rpx; |
|
/* width: calc((100% - 20rpx) / 3); */ |
|
height: 60rpx; |
|
background: #2866FF; |
|
border-radius: 10rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #999999; |
|
z-index: 0; |
|
transition: all .3s; |
|
} |
|
.sele_Bar_item { |
|
flex: 1; |
|
height: 60rpx; |
|
border-radius: 10rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #999999; |
|
z-index: 1; |
|
transition: color .4s; |
|
} |
|
|
|
.sele_Bar { |
|
/* background-color: #18B566; */ |
|
/* margin: 31rpx 40rpx; */ |
|
padding: 10rpx; |
|
display: flex; |
|
position: relative; |
|
background-color: #FFFFFF; |
|
border-radius: 10px; |
|
} |
|
</style>
|
|
|