最近做个项目,需要像淘宝秒杀页那样的tab标签,可滑动可点击的,就自己做了个组件记录一下
<template> <div class="tab" :style="{background:background}" ref="scroll"> <div class="navCon" :style="{width:width*nav.length+‘px‘,height:height+‘px‘}"> <div v-for="(item, index) in nav" :key="index" class="navList" :style="{width:width+‘px‘}" @click="toLeft(index)" > <p :style="{color:index==pitch?active_color:color,‘font-size‘:sizi+‘px‘,height:list_1.length?‘50%‘:‘100%‘}" class="title" > <span>{{item}}</span> </p> <p class="title1" v-if="list_1.length"> <span>{{list_1[index]}}</span> </p> </div> </div> </div> </template>
export default { data() { return { pitch:this.active }; }, props: { nav:{ type: Array, default: ()=>{ return ["标签一","标签二","标签三","标签四","标签五","标签六","标签七","标签八"] } }, active: { //唯一标识符 type: Number, default: 0 }, background: { //背景颜色 type: String, default: "red" }, width: { //宽 type: String, default: "76" }, active_color: { // 选中字体颜色 type: String, default: "#fff" }, color: { // 字体颜色 type: String, default: "#ccc" }, sizi: { // 字体大小一 type: String, default: "16" }, list_1: { // 数据列表 type: Array, default: function() { return []; } }, height: { // 高 type: String, default: "44" } }, created() { this.$nextTick(() => { if (this.active > 2 && this.active <= this.nav.length - 3) { this.$refs.scroll.scrollLeft = (this.active - 2) * this.width; } }); }, mounted() {}, methods: { toLeft(index) { this.pitch=index this.$emit(‘change‘,index) if (index <= 2) { this.$refs.scroll.scrollLeft = "0"; return; } else if (index >= this.nav.length - 3) { this.$refs.scroll.scrollLeft = this.width * (this.nav.length - 3); } else { this.$refs.scroll.scrollLeft = this.width * (index - 2); } } } }; </script>
<style scoped> .tab { width: 100%; height: 88px; overflow-y: scroll; } ::-webkit-scrollbar { display: none; } .navCon { height: 100%; } .navList { float: left; height: 100%; } .title { width: 100%; display: flex; align-items: center; justify-content: center; } .title1 { width: 100%; height: 50%; display: flex; align-items: center; justify-content: center; text-align: center; } </style>
----最后希望大神指点指点----
原文地址:https://www.cnblogs.com/sx122/p/12559289.html
时间: 2024-10-16 02:43:35