Vue uniapp realizes the segmenter effect

Vue uniapp realizes the segmenter effect

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:
  • Analysis of uniapp entry-level nvue climbing pit record
  • Based on vue+uniapp live broadcast project, uni-app imitates Douyin/Momo live broadcast room function
  • Detailed explanation of the difference between uniapp and vue

<<:  MySql8 WITH RECURSIVE recursive query parent-child collection method

>>:  How to modify the contents of an existing Docker container

Recommend

Detailed explanation of Mysql function call optimization

Table of contents Function call optimization Func...

Implementation of vscode custom vue template

Use the vscode editor to create a vue template, s...

Detailed explanation of the solution to Ubuntu dual system stuck when starting

Solution to Ubuntu dual system stuck when startin...

JavaScript function call, apply and bind method case study

Summarize 1. Similarities Both can change the int...

Summary of Vue's common APIs and advanced APIs

Table of contents nextTick Mixins $forceUpdate se...

How to Install and Configure Postfix Mail Server on CentOS 8

Postfix is ​​a free and open source MTA (Mail Tra...

How to create a MySQL master-slave database using Docker on MacOS

1. Pull the MySQL image Get the latest MySQL imag...

Detailed Analysis of Explain Execution Plan in MySQL

Preface How to write efficient SQL statements is ...

Common methods and problems of Docker cleaning

If you use docker for large-scale development but...

CSS sample code with search navigation bar

This article shows you how to use CSS to create a...

Node.js+express message board function implementation example

Table of contents Message Board Required librarie...

Learn the basics of nginx

Table of contents 1. What is nginx? 2. What can n...