This article shares the specific code of vue uniapp to achieve the segmenter effect for your reference. The specific content is as follows This is just to record the effect of dynamically changing the style with vue Show the effect first Template <view class="countTime"> <text class="title">Discounts and dining hours</text> <view class="wrap"> <view class="box" v-for="(item,index) in discountList" :key="index" @click="toggleItem(index)"> <view class="selBox" :style="[itemStyle(index)]"> <view class="countBox"> <text class="count">{{item.count}}</text> <text>Fold</text> </view> <text class="time">{{item.time}}</text> </view> <text class="countPrice" :style="[priceStyle(index)]">After discount, average price per person is ¥100</text> </view> </view> </view> Script part The key to this part is the code under computed export default { data() { return { themColor:this.Enum.Them.base, discountList:[{ "count":6.9, "time":"12:00~13:00" },{ "count":6.7, "time":"14:00~16:00" },{ "count":6.5, "time":"20:00~22:00" }], currentIndex:0 } }, computed:{ itemStyle(){ return index => { let style = {} if(index === this.currentIndex){ style.backgroundColor = this.themColor; style.border = `1px solid ${this.themColor}`; style.color = '#fff'; } //When the second one is selected, the first right border and the third left border are set to none if(this.currentIndex === 1){ if(index === this.currentIndex - 1){ style.borderRight = 'none !important' } if(index === this.currentIndex + 1){ style.borderLeft = 'none !important' } } return style } }, priceStyle(){ return index => { let style = {} if(index === this.currentIndex){ style.color = this.themColor } return style } } }, methods: { toggleItem(idx){ this.currentIndex = idx } } } CSS Styles The scss used here will not be described in detail here. .countTime{ display: flex; flex-direction: column; .title{ font-size: $uni-font-size-bl; margin: 20rpx 0; } .wrap{ display: flex; .box{ @include flex(column,center,center); width: 33%; &:nth-child(2){ & > .selBox{ border-left: none; border-right: none; } } .selBox{ @include flex(column,center,center); width: 100%; height: 150rpx; border: 1px solid $uni-border-color; .countBox{ font-size: $uni-font-size-lg; font-weight: bold; margin-bottom: 10rpx; .count{ font-size: $uni-font-size-bl; } } .time{ font-size: $uni-font-size-l; } } .countPrice{ margin-top: 10rpx; font-size: $uni-font-size-l; } } } } The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: MySql8 WITH RECURSIVE recursive query parent-child collection method
>>: How to modify the contents of an existing Docker container
Preface When we installed the system, we did not ...
Fault description percona5.6, mysqldump full back...
First of all, we need to know what a state manage...
concept If the index contains all the data that m...
<br />What is web2.0? Web2.0 includes those ...
Anchor tag usage: Linking to a specific location i...
Table of contents background What is tablespace f...
Keepalived+Nginx+Tomcat to achieve high availabil...
Create a container [root@server1 ~]# docker run -...
Table of contents Problem Description Historical ...
Preface This article contains 1. Several major co...
1. The difference between the command > and &g...
Supervisor Introduction Supervisor is a client/se...
I found a strange problem when deploying the proj...
I hope to implement some properties of the query ...