<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>

        ul {

            padding:

        }

        ul li {

            list-style: none;

        }

        .tab ul{

            position: relative;

            background: #;

        }

        .tab ul li {

            display: inline-block;

            padding: 50px;

            width: 100px;

            height: 25px;

            margin: ;

            background: #ccc;

            text-align: center;

            border: 1px solid #;

        }

        .tab .bottom {

            position: absolute;

            left: ;

            width: 100px;

            height: 3px;

            background: #f00;

            transition: all .2s;

        }

    </style>

</head>

<body>

<div class="tab" id="box">

    <ul ref ="tabWrapper">

        <li v-for="(item, index) in list" @click="tabClick(index, $event)">{{item}}</li>

        <div class="bottom" :style="style"></div>

    </ul>

</div>

</body>

<script>

    new Vue({

        el:'#box',

        data:{

            list: [,,,,],

            style: {}

        },

        mounted() {

            this.$nextTick(() => {

                const firstLi = this.$refs.tabWrapper.querySelector('li:nth-of-type(1)')

                this.style = {

                    left: firstLi.offsetLeft + 'px',

                    width: firstLi.offsetWidth +'px'

                }

            })

        },

        methods:{

            tabClick(index, e) {

                console.log(e)

                console.log(e.target.offsetWidth)

                console.log(e.target.offsetLeft)

                this.style = {

                    left: e.target.offsetLeft + 'px',

                    width: e.target.offsetWidth +'px'

                }

            }

        }

    });

</script>

</html>

tab选项卡平滑滚动vue的更多相关文章

  1. 微信小程序-滚动Tab选项卡

    前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...

  2. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  3. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  4. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  5. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  6. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  7. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  8. 移动web：tab选项卡

    平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmov ...

  9. 【Little Demo】左右按钮tab选项卡双切换

    通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...

随机推荐

  1. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  2. IDI Open 2016 H 字符串模拟题

    H - Palindrome Names 题意:给定一个字符串,每次可以向末尾添加一个字符或者更改一个字符.求使得字符串为回文串(从前往后和从后往前读一样)所花费的最小步数. 题解: 看来需要多思考啊 ...

  3. 如何在WPF控件上应用简单的褪色透明效果？

    原文 https://dailydotnettips.com/how-to-create-simple-faded-transparent-controls-in-wpf/ 使用OpacityMask ...

  4. Card Hand Sorting 二进制枚举暴力

    这个题其实由于只有4种花色的,那么每种花色排列的顺序,也不过是4!种,然后对于每种花色内部到底是升序还是降序,其实也可以直接暴力,一共也就4!*2^4种情况,然后直接进行排序就可以了,但是我们如何计算 ...

  5. [***]HZOJ 跳房子

    一道非常神仙的题. 算法一:对于20%的数据: 模拟,直接走K步,时间复杂度O(K) 算法二:对于40%的数据:走M*N步内必有一个循环节.直接走,找循环节,时间复杂度O(M*N) 正解大概有两种做法 ...

  6. Getting started with the basics of programming exercises_4

    1.编写一个删除C语言程序中所有的注释语句的程序.要正确处理带引号的字符串与字符串常量,C语言中程序注释不允许嵌套. #include<stdio.h> void rcomment(int ...

  7. thinkphp 本地配置手机移动端，在pc端访问手机端

  8. php解压缩

    1.zip文件 2.rar文件 3.php调用linux指令进行解压缩 解压7z文件: 注:Windows下的文件编码和LINUX不一样,中文系统为GB,LINUX为UTF-8编码,这种情况下,中文名 ...

  9. 洛谷P5664 Emiya 家今天的饭 问题分析

    首先来看一道我编的题: 安娜写宋词 题目背景 洛谷P5664 Emiya 家今天的饭[民间数据] 的简化版本. 题目描述 安娜准备去参加宋词大赛,她一共掌握 \(n\) 个 词牌名 ,并且她的宋词总共 ...

  10. Google Colab使用教程

    简介Google Colaboratory是谷歌开放的云服务平台,提供免费的CPU.GPU和TPU服务器. 目前深度学习在图像和文本上的应用越来越多,不断有新的模型.新的算法获得更好的效果,然而,一方 ...