vue uniapp實現(xiàn)分段器效果
更新時間:2021年10月13日 14:49:48 作者:不爭亦不屑
這篇文章主要為大家詳細介紹了vue uniapp實現(xiàn)分段器效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue uniapp實現(xiàn)分段器效果的具體代碼,供大家參考,具體內容如下
此舉只是記錄下用vue動態(tài)改變樣式效果
先展示下效果
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; } } } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
關于Vue3路由push跳轉問題(解決Vue2this.$router.push失效)
這篇文章主要介紹了Vue3路由push跳轉問題(解決Vue2this.$router.push失效),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07