纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue uniapp分段器效果 vue uniapp实现分段器效果

不争亦不屑   2021-10-13 我要评论
想了解vue uniapp实现分段器效果的相关内容吗,不争亦不屑在本文为您仔细讲解vue uniapp分段器效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,uniapp,分段器,下面大家一起来学习吧。

此举只是记录下用vue动态改变样式效果

先展示下效果

template部分

<view class="countTime">
 <text class="title">折扣和就餐时间</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>折</text>
       </view>
    <text class="time">{{item.time}}</text>
   </view> 
   <text class="countPrice" :style="[priceStyle(index)]">折后人均¥100</text>
  </view>
 </view>
</view>

script部分

这部分关键的是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';
     }
     //当选中第二个时 第一个右边框和第三个左边框置为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样式

这里使用的scss,具体的用法这里不再赘述啦

.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: bolder;
      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;
    }
   }
  }
 }

相关文章

猜您喜欢

  • Java 网络编程 Java 全面掌握网络编程篇

    想了解Java 全面掌握网络编程篇的相关内容吗,青素i在本文为您仔细讲解Java 网络编程的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java,网络编程,Java,网络,下面大家一起来学习吧。..
  • MySQL索引数据结构 深入解析MySQL索引数据结构

    想了解深入解析MySQL索引数据结构的相关内容吗,老郑在本文为您仔细讲解MySQL索引数据结构的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:mysql索引数据结构类型,mysql索引数据结构有哪些,mysql索引数据结构存储,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.SoftYun.net 【软件云】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式