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
Table of contents Function call optimization Func...
Use the vscode editor to create a vue template, s...
Solution to Ubuntu dual system stuck when startin...
Summarize 1. Similarities Both can change the int...
Table of contents nextTick Mixins $forceUpdate se...
There are two special values that can be assign...
Postfix is a free and open source MTA (Mail Tra...
1. Pull the MySQL image Get the latest MySQL imag...
Problem Description Today, when I was modifying t...
Preface How to write efficient SQL statements is ...
If you use docker for large-scale development but...
This article shows you how to use CSS to create a...
Table of contents Message Board Required librarie...
Table of contents Pull the rocketmq image Create ...
Table of contents 1. What is nginx? 2. What can n...