前端vue和uniapp哪个好用,
这篇文章主要为大家详细介绍了vue uniapp实现分段器效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue uniapp实现分段器效果的具体代码，供大家参考，具体内容如下
此举只是记录下用某视频剪辑软件动态改变样式效果
先展示下效果
template部分
view class=countTime
text class=title 折扣和就餐时间/文本
视图换行
折扣列表中的 view class=box v-for=(item，index):key= index @ click= toggle item(index)
view class= selBox :style=[项目样式(索引)]
视图class=countBox
text class= count { item。计数} }/文本
文本折/文本
/查看
text class= time"{ item。time } }/text
/查看
text class= count price :style=[价格样式(索引)]折后人均100元/条
/查看
/查看
/查看
script部分
这部分关键的是计算下的代码
导出默认值{
data() {
返回{
主题颜色：这个. Enum。他们.基地，
折扣列表：[{
计数:6.9,
时间： 12:00~13:00
},{
计数:6.7,
时间: 14:00~16:00
},{
计数:6.5,
时间: 20:00~22:00
}],
当前索引：0
}
},
计算值：{
itemStyle(){
返回索引={
let style={}
if(index===this.currentIndex){
风格。背景色=这个。他们着色；
风格。border=` 1px solid $ { this。他们的颜色} `；
style.color= # fff
}
//当选中第二个时第一个右边框和第三个左边框置为没有人
if(this.currentIndex===1){
if(index===this。当前索引-1){
style.borderRight=none！重要
}
if(index===this。当前索引1){
style.borderLeft=none！重要
}
}
返回样式
}
},
价格样式(){
返回索引={
let style={}
if(index===this.currentIndex){
style.color=this.themColor
}
返回样式
}
}
},
方法：{
toggleItem(idx){
this.currentIndex=idx
}
}
}
css样式
这里使用的scss，具体的用法这里不再赘述啦。计数时间{
显示器：flex
伸缩方向：列；标题{
font-size:$ uni-font-size-bl；
边距：20 rpx 0；
}。换行{
显示器：flex。方框{
@包含flex(列，居中，居中);
宽度：33%;
：第n个孩子(2){。selBox{
左边界：无；
右边界：无；
}
}。selBox{
@包含flex(列，居中，居中);
宽度：100%;
身高：150rpx
边框：1px纯色$ uni-border-color；计数框{
font-size:$ uni-font-size-LG；
字体粗细：加粗；
边距-底部：10rpx。计数{
font-size:$ uni-font-size-bl；
}
}。时间{
font-size:$ uni-font-size-l；
}
}。还价
页边距-顶部：10 rpx
font-size:$ uni-font-size-l；
}
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。