客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
本文实例为大家分享了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;
}
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。 |
请发表评论