vue uniapp实现分段器效果

 更新时间:2021-10-13 16:06:18   作者:佚名   我要评论(0)

本文实例为大家分享了vue uniapp实现分段器效果的具体代码,供大家参考,具体内容如下
此举只是记录下用vue动态改变样式效果
先展示下效果

本文实例为大家分享了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;
    }
   }
  }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • vue实现选项卡及选项卡切换效果
  • Vue.js组件tabs实现选项卡切换效果
  • Vue.js组件tab实现选项卡切换
  • vue中选项卡点击切换且能滑动切换功能的实现代码
  • Vue.js tab实现选项卡切换

相关文章

  • vue uniapp实现分段器效果

    vue uniapp实现分段器效果

    本文实例为大家分享了vue uniapp实现分段器效果的具体代码,供大家参考,具体内容如下 此举只是记录下用vue动态改变样式效果 先展示下效果
    2021-10-13
  • Java 全面掌握网络编程篇

    Java 全面掌握网络编程篇

    目录计算机网络网络模型客户机服务器模式(Client/Server)TCP/IP的概念和实现TCP三次握手(Three-way handshake)TCP编程UDP的概念和实现UDP编程
    2021-10-13
  • @JsonSerialize不起作用的解决方案

    @JsonSerialize不起作用的解决方案

    目录@JsonSerialize不起作用在项目中 当字段实体类为Long类型时但是这里有个小坑@JsonSerialize正确使用1. 写一个负责转换的类2. 在实体类上
    2021-10-13
  • 深入解析MySQL索引数据结构

    深入解析MySQL索引数据结构

    目录概述索引数据结构二叉树 红黑树 B-Tree B+Tree Hash 索引InnoDB 索引实现(聚集) 索引文件和数据文件是分离的(非聚集) 聚集索
    2021-10-13
  • 十分钟上手正则表达式 上篇

    十分钟上手正则表达式 上篇

    目录一、正则表达式的定义:二、正则表达式的类型三、定义 BRE 模式3.1 纯文本3.2 特殊字符3.3 锚字符3.3.1 锁定在行首3.3.2 锁定在行尾3.3.
    2021-10-13
  • Python爬虫实战JS逆向AES逆向加密爬取

    Python爬虫实战JS逆向AES逆向加密爬取

    目录爬取目标工具使用项目思路解析简易源码分享爬取目标 网址:监管平台 工具使用 开发工具:pycharm 开发环境:python3.7, Windows10 使用
    2021-10-13
  • 使用Swagger实现接口版本号管理方式

    使用Swagger实现接口版本号管理方式

    目录Swagger实现接口版本号管理使用swagger测试接口Swagger实现接口版本号管理 前言:使用swagger暴露对外接口时原则是每个系统在不同的迭代
    2021-10-13
  • Java数据结构实现二维数组与稀疏数组转换详解

    Java数据结构实现二维数组与稀疏数组转换详解

    基本介绍 当一个数组中大部分元素为0,或者为同一个值的数组时,可以使用稀疏数组来保存该数组。 稀疏数组的处理方法是: ①记录数组一共有
    2021-10-13
  • 十分钟上手正则表达式 下篇

    十分钟上手正则表达式 下篇

    目录一、正则表达式常用符号1.1 问号【?】1.2 加号【+】1.3 花括号{}1.4 管道符号【|】1.5 小括号()二、正则表达式实战示例示例1:示例2:
    2021-10-13
  • SpringBoot API增加version版本号方式

    SpringBoot API增加version版本号方式

    目录SpringBoot 增加 API Version一、增加ApiVersion自定义注解二、新增RequestCondition自定义匹配条件三、重写RequestMappingHandlerMappi
    2021-10-13

最新评论