vue uniapp實(shí)現(xiàn)分段器效果
本文實(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項(xiàng)目常用組件和框架結(jié)構(gòu)介紹
這篇文章通過圖文形式給大家介紹了vue項(xiàng)目的骨架及常用組件的相關(guān)知識(shí),對(duì)此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。2017-12-12Vuex實(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失效)
這篇文章主要介紹了Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07詳解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),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03