欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue uniapp實(shí)現(xiàn)分段器效果

 更新時(shí)間:2021年10月13日 14:49:48   作者:不爭(zhēng)亦不屑  
這篇文章主要為大家詳細(xì)介紹了vue uniapp實(shí)現(xiàn)分段器效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue uniapp實(shí)現(xiàn)分段器效果的具體代碼,供大家參考,具體內(nèi)容如下

此舉只是記錄下用vue動(dòng)態(tài)改變樣式效果

先展示下效果

template部分

<view class="countTime">
 <text class="title">折扣和就餐時(shí)間</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部分

這部分關(guān)鍵的是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';
     }
     //當(dāng)選中第二個(gè)時(shí) 第一個(gè)右邊框和第三個(gè)左邊框置為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;
    }
   }
  }
 }

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 在vue中如何封裝G2圖表

    在vue中如何封裝G2圖表

    這篇文章主要介紹了在vue中如何封裝G2圖表,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue項(xiàng)目常用組件和框架結(jié)構(gòu)介紹

    vue項(xiàng)目常用組件和框架結(jié)構(gòu)介紹

    這篇文章通過圖文形式給大家介紹了vue項(xiàng)目的骨架及常用組件的相關(guān)知識(shí),對(duì)此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。
    2017-12-12
  • vant-Dialog 彈出框的使用小結(jié)

    vant-Dialog 彈出框的使用小結(jié)

    這篇文章主要介紹了vant-Dialog 彈出框的使用小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法

    Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法

    Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法,需要的朋友可以參考下
    2019-12-12
  • 關(guān)于Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效)

    關(guān)于Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效)

    這篇文章主要介紹了Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-07-07
  • 詳解vue如何獲取當(dāng)前系統(tǒng)時(shí)間

    詳解vue如何獲取當(dāng)前系統(tǒng)時(shí)間

    這篇文章主要詳細(xì)介紹了vue如何獲取當(dāng)前系統(tǒng)時(shí)間,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-01-01
  • 使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn)

    使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn)

    這篇文章主要介紹了使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2021-07-07
  • Vue.js2.0中的變化小結(jié)

    Vue.js2.0中的變化小結(jié)

    最近小編在學(xué)習(xí)vue.js ,發(fā)現(xiàn)里面有好多好玩的東東,今天小編給大家分享Vue.js2.0中的變化,小編會(huì)在日后給大家持續(xù)更新的,感興趣的朋友參考下吧
    2017-10-10
  • 如何使用vue自定義指令構(gòu)建拖放插件

    如何使用vue自定義指令構(gòu)建拖放插件

    這篇文章主要介紹了如何使用vue自定義指令構(gòu)建拖放插件,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下
    2021-04-04
  • vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包

    vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包

    這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評(píng)論