四个分段器

骑猪看日落 2022-01-31 05:59 268阅读 0赞

</view>  
</template>

export default \{  
data() \{  
return \{  
flag: false,  
items: \[  
'选项卡1',  
'选项卡2',

\],  
lists: \[  
'选项卡3',  
'选项卡4'

\],  
styles: \[\{  
value: 'button',  
text: '按钮'  
\}, \{  
value: 'text',  
text: '文字'  
\}\],  
colors: \[  
'\#007aff',  
'\#4cd964',  
'\#dd524d'  
\],  
current: 0,  
current1 : 0,  
typeChannel: 0,  
activeColor: '\#007aff',  
styleType: 'button',  
styleIndex: 0,  
colorIndex: 0,  
\}  
\},  
components: \{  
uniSegmentedControl  
\},  
methods: \{  
  
onClickItem(index) \{  
console.log(index)  
this.flag = !this.flag  
this.typeChannel = index;  
\},  
onClickItem1(index) \{  
console.log(index)  
this.current1 = index;  
this.typeChannel = 2+index;  
\},  
styleChange(evt) \{  
const value = evt.target.value;  
if (this.styleType !== value) \{  
this.styleType = value;  
for (let i = 0; i < this.styles.length; i++) \{  
if (this.styles\[i\].value === value) \{  
this.styleIndex = i;  
break;  
\}  
\}  
\}  
\},  
colorChange(evt) \{  
if (this.styleType !== evt.target.value) \{  
this.activeColor = evt.target.value;  
this.colorIndex = this.colors.indexOf(evt.target.value);  
\}  
\}  
\}  
\}  
</script>

.uni-bottom \{  
margin-top: 200upx;  
\}

.content \{  
display: flex;  
justify-content: center;  
align-items: center;  
height: 300upx;  
text-align: center;  
\}

.color-tag \{  
width: 50upx;  
height: 50upx;  
\}  
</style>