vue|vue uniapp实现分段器效果 vueuniapp实现分段器效果

本文实例为大家分享了vue uniapp实现分段器效果的具体代码，供大家参考，具体内容如下
此举只是记录下用vue动态改变样式效果
先展示下效果

文章图片

template部分

折扣和就餐时间 {{item.count}}折{{item.time}} 折后人均￥100

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'; }//当选中第二个时第一个右边框和第三个左边框置为noneif(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; }}} }

【vue|vue uniapp实现分段器效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。