<template> <view> <scroll-view scroll-x class='tab-list' :scroll-into-view="'tab'+(activeIndex-1)" :scroll-with-animation="true" :style="{background: bgColor}"> <view class='tab-item rel' v-for="(item,index) in list" :key="index" @tap='handerTabChange(index)' data-index="index" :id="'tab'+index" :style='{width,height,lineHeight:height,color:index==activeIndex?activeColor:color}'> <view class="flex-y-baseline flex-x-center rel"> {{item.title || item}} <block v-if="item.is_sign == 1"> <view class="tab-item-sanjao abs" :style="{right: item.title.length == 3 ? '-20rpx' : ''}"> <view class="up iconfont icon-up-fill rel" :style="{color:index==activeIndex && item.sign == 1?activeColor:'#ccc',}"></view> <view class="down iconfont icon-down-fill rel" :style="{color:index==activeIndex && item.sign == 0?activeColor:'#ccc',}"></view> </view> </block> </view> <view class="abs line" :style="{background: activeColor}" v-if="isLine && index==activeIndex && !item.is_sign"> </view> <view v-if="item.number" class="item-msg c-base f-icontext abs" :style="{width: item.number<10 ? '30rpx' : '50rpx'}">{{item.number < 100 ? item.number : '99+'}} </view> </view> </scroll-view> </view> </template> <script> export default { name: 'tab', props: { list: { type: Array, default () { return [] } }, activeIndex: { type: Number, default () { return 0 } }, color: { type: String, default () { return '#333' } }, activeColor: { type: String, default () { return '#e73535' } }, bgColor: { type: String, default () { return '#fff' } }, width: { type: String, default () { return '' } }, height: { type: String, default () { return '100rpx' } }, isLine: { type: Boolean, default () { return true } } }, created() { }, data() { return { } }, methods: { handerTabChange(index) { this.$emit('change', index); } }, } </script> <style lang="scss"> .tab-list { white-space: nowrap; background: #fff; font-size: 30rpx; width: 100%; } .tab-item { display: inline-block; text-align: center; padding: 0 20rpx; border-color: #fff; box-sizing: border-box; .line { width: 80rpx; height: 6rpx; border-radius: 6rpx; left: 50%; bottom: 0rpx; margin-left: -40rpx; } } .tab-item-sanjao { top: 18rpx; right: -6rpx; width: 30rpx; height: 50rpx; transform: scale(0.6); .iconfont { font-size: 28rpx; } .up { top: 0; left: 0; } .down { bottom: 10rpx; left: 0; } } .item-msg { width: 30rpx; height: 30rpx; line-height: 30rpx; border-radius: 15rpx 15rpx 15rpx 0; background: #f12c20; right: 5rpx; top: 5rpx; } </style>