vue tab标签

最近做个项目,需要像淘宝秒杀页那样的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

vue tab标签的相关文章

Vue实现简单Tab标签页组件

Tab 标签页组件 基础用法 默认情况下启用第一个标签,可以通过v-model绑定当前激活的标签索引 <tabs v-model="active"> <tab title="标签 1">内容 1</tab> <tab title="标签 2">内容 2</tab> <tab title="标签 3">内容 3</tab> </van-ta

Android(java)学习笔记129:Tab标签的使用

1.案例1---TabProject (1)首先是main.xml文件: 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" 4 android:layout_wid

搞定tab标签切换效果

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>搞定tab标签切换效果</title><style>*{ margin:0; padding:0;list-style: none;}body {font:12px/1.5 Tahoma;}#big{border: 1px solid b

Android 底部TabActivity(3)——ActivityGroup|顶部底部均有Tab标签之二

上一篇使用过时的ActivityGroup简单实现了顶部底部均有Tab标签的效果,是页面底部只有文字的样式,今天想完善一下效果,底部实现文字加图标的样式. 本文属于半成品,本来想着放弃的,想着先放博客吧,好歹也是一种思路,以后作参考用!追求完美效果的可以忽略本篇,我会在后续文章中实现更优的效果! 先看下效果图 首先是主页面MainActivity.java,这种方式其实不是真正意义上的Tab,只是实现了这样的效果.底部用了GridView实现三个切换开关,放到页面底部. package sun.

修改LigerUI的导航栏,改为Tab标签模式

LigerUI导航栏本身是没有tab标签模式的,但是实际上,很多时候标签能能更好的展示业务,将导航的内容按照类目进行划分,避免一个里面太多的情况. 下面是我改造后的效果图,如下: ligerui是一个不错的免费开源ui框架,功能还是很强大的,但是有些地方也做的不够好,比如表单的自适应布局,树,布局等等,但是相信会越来越好.这里给出我改造后代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

【Little Demo】Tab标签

Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容.目前在各大网站都有存在这种效果.例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等. 1.简单的 Tab 标签 a) 先来实现Tab标签的头部 通过HTML和CSS完成基本的标签效果.包括HTML的div标签和列表标签以及CSS定位.颜色和边距等. HTML代码: <div class="tab"> <ul class="tab-title"> <

整理用js实现tab标签页

首先是css样式,比如这样的: 1 <style> 2 *{ 3 margin:0; 4 padding: 0; 5 list-style: none; 6 font-size: 12px; 7 } 8 .notice{ 9 width: 298px; 10 height: 98px; 11 margin: 10px; 12 border:1px solid #7c7c7c; 13 overflow: hidden; 14 } 15 .notice-tit{ 16 height: 27px;

如何一行jquery代码写出tab标签页(链式操作)

啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en"> <head> <style> *{ padding: 0; margin: 0; } ul{ list-style-type: none; } #ul{ height: 30px; margin-bottom: 10px; } #ul li { height: 30px;

AxureRP制作Tab标签

1.添加动态Panel 2.双击进入编辑动态Panel 3.点击一个面板状态,编辑全部状态 4.选择虚线框,画出两个矩形图,一大一小: 5.设置小矩形为上角圆角20 6.复制几个tab,并命名,设置底色,调整位置,tab1设为置顶 7.给另外的状态也加上第6步的图 8.在状态1中设置Tab2.Tab3的点击动作 9.其它的状态的Tab也设置相应的点击事件 10.保存生成html,浏览效果 AxureRP制作Tab标签,布布扣,bubuko.com