tab选项卡平滑滚动vue
<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的更多相关文章
- 微信小程序-滚动Tab选项卡
前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- Vue如何引入jquery实现平滑滚动到指定位置效果
在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
- vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
- android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...
- 移动web：tab选项卡
平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmov ...
- 【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...
随机推荐
- 小爬爬5:scrapy介绍3持久化存储
一.两种持久化存储的方式 1.基于终端指令的吃持久化存储: 特点:终端指令的持久化存储,只可以将parse方法的返回值存储到磁盘文件 因此我们需要将上一篇文章中的author和content作为返回值 ...
- mariadb配置文件优化参数
mariadb数据库优化需要根据自己业务需求以及根据硬件配置来进行参数优化,下面是一些关于mariadb数据库参数优化的配置文件. 1 如下为128G内存32线程处理器的mariadb配置参数优化: ...
- mysql的执行计划概念说明
explain中的列的说明 1. id列 id列的编号是 select 的序列号,有几个 select 就有几个id,并且id的顺序是按 select 出现的 顺序增长的. id列越大执行优先级越高, ...
- 洛谷4178 BZOJ1468 Tree题解点分治
点分治的入门练习. 题目链接 BZOJ的链接(权限题) 关于点分治的思想我就不再重复了,这里重点说一下如何判重. 我们来看上图,假设我们去除了1节点,求出d[2]=1,d[3]=d[4]=2 假设k为 ...
- 《DL/T 976-2017 带电作业用工具、装置和设备预防性试验规程》中的样品名称及试验项目
- ajax封装最后形态
function obj1(obj) { obj.t = new Date().getTime(); var res = []; for (var key in obj) //url中不能出现中文 r ...
- 【NS2】trace 文件格式（转载）
本文档是对 http://nsnam.isi.edu/nsnam/index.php/NS-2_Trace_Formats > 的翻译. 译注:本文描述的无线格Trace格式已经有些陈旧,现在一 ...
- onethink 返回上一页
// 记录当前列表页的cookie Cookie('__forward__',$_SERVER['REQUEST_URI']); $this->success('操作成功!',Co ...
- 「BZOJ2510」弱题
「BZOJ2510」弱题 这题的dp式子应该挺好写的,我是不会告诉你我开始写错了的,设f[i][j]为操作前i次,取到j小球的期望个数(第一维这么大显然不可做),那么 f[i][j]=f[i-1][j ...
- 洛谷 1602 Sramoc问题
Description 话说员工们整理好了筷子之后,就准备将快餐送出了,但是一看订单,都傻眼了:订单上没有留电话号码,只写了一个sramoc(k,m)函数,这什么东西?什么意思?于是餐厅找来了资深顾问 ...