shop-applet/components/cx-navTitle.vue

126 lines
3.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>