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

Interpretation and usage of various React state managers

First of all, we need to know what a state manage...

Detailed explanation of MySQL covering index

concept If the index contains all the data that m...

A brief introduction to web2.0 products and functions

<br />What is web2.0? Web2.0 includes those ...

Example sharing of anchor tag usage in HTML

Anchor tag usage: Linking to a specific location i...

The concept of MySQL tablespace fragmentation and solutions to related problems

Table of contents background What is tablespace f...

Keepalived+Nginx+Tomcat sample code to implement high-availability Web cluster

Keepalived+Nginx+Tomcat to achieve high availabil...

Independent implementation of nginx container configuration file

Create a container [root@server1 ~]# docker run -...

Summary of MySQL 8.0 Online DDL Quick Column Addition

Table of contents Problem Description Historical ...

Detailed explanation of MySQL basic operations (Part 2)

Preface This article contains 1. Several major co...

Detailed explanation of Linux command file overwrite and file append

1. The difference between the command > and &g...

Tutorial on upgrading, installing and configuring supervisor on centos6.5

Supervisor Introduction Supervisor is a client/se...

MySQL database connection exception summary (worth collecting)

I found a strange problem when deploying the proj...