97 lines
1.9 KiB
Vue
97 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<scroll-view scroll-x>
|
||
|
|
<view :class="isCenter?'disac':'disjb'">
|
||
|
|
<view @tap="choosecate(index)"
|
||
|
|
:style="{
|
||
|
|
background : current==index ? activeb:defaultb,
|
||
|
|
fontSize:defaultf,
|
||
|
|
borderRadius:defaultRadius,
|
||
|
|
minWidth:isMinW ? minWidth:'',
|
||
|
|
color : current==index ? activec:defaultc}"
|
||
|
|
class="flexs cateitem" :class="(!isCenter && newcateList.length<=4)?'maright0':''"
|
||
|
|
v-for="(item,index) in newcateList" :key="index">{{item.title}}</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:"cate-pu",
|
||
|
|
props:{
|
||
|
|
isaaaa:{
|
||
|
|
type:Number,
|
||
|
|
default:1
|
||
|
|
},
|
||
|
|
isCenter:{
|
||
|
|
type:Boolean,
|
||
|
|
default:false
|
||
|
|
},
|
||
|
|
newcateList:{//分类列表
|
||
|
|
type:Array,
|
||
|
|
default:function(){
|
||
|
|
return [
|
||
|
|
{title:'热门问题'},
|
||
|
|
{title:'病种'},
|
||
|
|
{title:'案例日记'},
|
||
|
|
{title:'效果模拟'},
|
||
|
|
{title:'效果模拟'},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
activeb:{//选中背景色
|
||
|
|
type:String,
|
||
|
|
default:'#3875F6'
|
||
|
|
},
|
||
|
|
defaultb:{//默认背景色
|
||
|
|
type:String,
|
||
|
|
default:'#FFFFFF'
|
||
|
|
},
|
||
|
|
activec:{//选中字体颜色
|
||
|
|
type:String,
|
||
|
|
default:'#FFFFFF'
|
||
|
|
},
|
||
|
|
defaultc:{//默认字体颜色
|
||
|
|
type:String,
|
||
|
|
default:'#333333'
|
||
|
|
},
|
||
|
|
defaultf:{//默认字体大小
|
||
|
|
type:String,
|
||
|
|
default:'28rpx'
|
||
|
|
},
|
||
|
|
defaultRadius:{//圆角
|
||
|
|
type:String,
|
||
|
|
default:'10rpx'
|
||
|
|
},
|
||
|
|
isMinW:{//是否使用最小宽度
|
||
|
|
type:Boolean,
|
||
|
|
default:true
|
||
|
|
},
|
||
|
|
minWidth:{//最小宽度
|
||
|
|
type:String,
|
||
|
|
default:'110rpx'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
current:0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
choosecate(index){
|
||
|
|
this.current = index;
|
||
|
|
this.$emit('choosecateEv',index)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.catetwomo{background-color: #FFFFFF;color: #4D4D4D;}
|
||
|
|
.disac{display: flex;align-items: center;}
|
||
|
|
.flexs{flex-shrink: 0;}
|
||
|
|
.cateitem{padding: 16rpx 20rpx;text-align: center;margin-right: 20rpx;}
|
||
|
|
.maright0{margin-right: 0!important;}
|
||
|
|
</style>
|