本文实例为大家分享了Vue uniapp实现分段器效果的具体代码,供大家参考,具体内容如下 此举只是记录下用vue动态改变样式效果 先展示下效果 template部分 <
本文实例为大家分享了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;
}
}
}
}
--结束END--
本文标题: vue uniapp实现分段器效果
本文链接: https://www.lsjlt.com/news/154366.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0