126 lines
3.0 KiB
Vue
126 lines
3.0 KiB
Vue
<template>
|
||
<!-- tab选项卡滑动切换 -->
|
||
<view class="my-tab" ref="myTabRef">
|
||
<view class="my-tab-item" v-for="(item, index) in tabs" :ref="`tab${item.name}Ref`"
|
||
:class="{ active: item.name === activeItem }" :key="index">
|
||
<view class="my-tab-text" ref="tabName" @click="tabClick(item,index)">
|
||
<view class="name">{{ item.label }}</view>
|
||
<view class="xian" v-if='isshow'></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/*
|
||
tabs -- 传入标签名 array类型 : tabs: [{name: "tabOne",label: "全部"},{...}]
|
||
activeItem -- 默认第一个class名 string
|
||
@tabClick -- 自定义点击事件 回传用到 做逻辑判断
|
||
标签大小、默认颜色、选中颜色，下边框线等样式，已在css中注释，请根据注释修改即可
|
||
*/
|
||
export default {
|
||
name: "cx-navTitle",
|
||
props: {
|
||
tabs: { //所有标签名
|
||
type: Array,
|
||
default: []
|
||
},
|
||
activeItem: { //默认第一个 选中的class类名
|
||
type: String,
|
||
default: ''
|
||
},
|
||
show: {
|
||
type: Boolean,
|
||
default: ''
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
isshow: true,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.isshow = this.show
|
||
},
|
||
methods: {
|
||
// tab点击
|
||
tabClick(item, index) {
|
||
this.$emit('tabClick', item) //回传数据
|
||
// 触发滑动方法
|
||
this.scrollLeftTo(item.name);
|
||
},
|
||
// 滑动
|
||
scrollLeftTo(name) {
|
||
const ref = `tab${name}Ref`;
|
||
// 获取myTabRef的DOM元素，即类名为my-tab的标签
|
||
const nav = this.$refs.myTabRef.$el;
|
||
// 获取当前点击的某一个tab的的DOM元素，即类名为my-tab-item的标签
|
||
const title = this.$refs[ref][0].$el;
|
||
// 计算位移偏差
|
||
// #ifdef H5
|
||
const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
|
||
nav.scrollLeft = to;
|
||
// #endif
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.my-tab {
|
||
width: 720rpx;
|
||
margin: 0 auto;
|
||
// height:80rpx;
|
||
// background: #ffffff;
|
||
// line-height:80rpx;
|
||
// border:1px solid red;
|
||
display: flex;
|
||
overflow-x: scroll;
|
||
padding-right: 0rpx;
|
||
scroll-behavior: smooth; //平稳的滑动效果
|
||
font-size: 32rpx;
|
||
|
||
.my-tab-item {
|
||
padding: 20rpx 35rpx; //标签上下左右距离 -- 在这里改
|
||
color: #707070; //标签默认颜色 -- 在这里改
|
||
// height: 0rpx;
|
||
text-align: center;
|
||
flex: 1 0 auto;
|
||
|
||
&.active {
|
||
color: #333333; //标签选中颜色 -- 在这里改
|
||
font-weight: 600;
|
||
position: relative;
|
||
|
||
.my-tab-text {
|
||
.xian {
|
||
position: relative;
|
||
top: 0rpx; //下边框线和标签距离 -- 在这里改
|
||
z-index: 8;
|
||
width: 26px;
|
||
margin: 0 auto;
|
||
border: 1rpx solid #F84221; //标签底部下边框线 -- 在这里改
|
||
border-radius: 50rpx;
|
||
padding: 0rpx 30rpx;
|
||
opacity: 0.6; //下边框线透明度 -- 在这里改
|
||
}
|
||
|
||
.name {
|
||
position: relative;
|
||
z-index: 9;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #F84221;
|
||
color: #F84221;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 隐藏滚动条
|
||
::-webkit-scrollbar {
|
||
height: 0;
|
||
width: 0;
|
||
color: transparent;
|
||
}
|
||
</style> |