|
|
@ -1,6 +1,6 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="segmented-control"> |
|
|
<view class="page1"> |
|
|
<view v-for="(item, index) in values" class="segmented-control__item" @click="_onClick(index)"> |
|
|
<view v-for="(item, index) in values" class="page1__item" @click="_onClick(index)"> |
|
|
<view> |
|
|
<view> |
|
|
<text :style="{color: |
|
|
<text :style="{color: |
|
|
index === currentIndex |
|
|
index === currentIndex |
|
|
@ -9,7 +9,7 @@ |
|
|
: '#fff' |
|
|
: '#fff' |
|
|
: styleType === 'text' |
|
|
: styleType === 'text' |
|
|
? '#000' |
|
|
? '#000' |
|
|
: activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text> |
|
|
: activeColor}" class="page1__text" :class="styleType === 'text' && index === currentIndex ? 'page1__item--text': ''">{{ item }}</text> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
@ -82,48 +82,30 @@ |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.segmented-control { |
|
|
page{ |
|
|
width: 500rpx; |
|
|
width: 100% ; |
|
|
|
|
|
} |
|
|
|
|
|
.page1 { |
|
|
|
|
|
width: 100%; |
|
|
overflow-x: scroll; |
|
|
overflow-x: scroll; |
|
|
height: 100rpx; |
|
|
height: 80rpx; |
|
|
line-height: 100rpx; |
|
|
line-height: 100rpx; |
|
|
|
|
|
background: #777; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.segmented-control__item { |
|
|
.page1__item { |
|
|
display: inline-block; |
|
|
float: left; |
|
|
box-sizing: border-box; |
|
|
|
|
|
width: 120rpx; |
|
|
width: 120rpx; |
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.segmented-control__item--button { |
|
|
|
|
|
border-style: solid; |
|
|
|
|
|
border-top-width: 1px; |
|
|
|
|
|
border-bottom-width: 1px; |
|
|
|
|
|
border-right-width: 1px; |
|
|
|
|
|
border-left-width: 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.segmented-control__item--button--first { |
|
|
|
|
|
border-left-width: 1px; |
|
|
|
|
|
border-top-left-radius: 5px; |
|
|
|
|
|
border-bottom-left-radius: 5px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.segmented-control__item--button--last { |
|
|
|
|
|
border-top-right-radius: 5px; |
|
|
|
|
|
border-bottom-right-radius: 5px; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.segmented-control__item--text { |
|
|
.page1__item--text { |
|
|
border-bottom-style: solid; |
|
|
border-bottom-style: solid; |
|
|
border-bottom-width: 2px; |
|
|
border-bottom-width: 2px; |
|
|
padding: 12rpx 0; |
|
|
padding: 12rpx 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.segmented-control__text { |
|
|
.page1__text { |
|
|
font-size: 28rpx; |
|
|
font-size: 28rpx; |
|
|
line-height: 40rpx; |
|
|
line-height: 40rpx; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
|