仿照B站制作的滑动导航功能,进行了部分优化,例如可定制默认选中元素,并将选中元素居中显示,可动态更改数据,可定制回调函数取的下标和选中元素内容,可根据需求制作N级联动

已开发成插件,使用方法与源码请前往github------传送门

注:此项目依托于swiper

vue-tabbar-slide.vue

template:

<div class="tabbar-slide-wrapper">
<div class="swiper-container" :class="options.container">
<div class="swiper-wrapper">
<div :style="[slideStyle, {'color': (index == slideOptions.slideIndex) ? slideStyle.checkedColor : slideStyle.color}]" :class="[index == slideOptions.slideIndex ? 'swiper-slide-checked' : '', 'swiper-slide']" v-for="(item, index) in options.slideData" :key="index">{{item}}</div>
<!-- 下划线 -->
<div :style="{width: slideStyle.width, height: downLineStyle.downLineHeight, background: downLineStyle.downLineColor}" ref="slideDownLine" class="slide-down-line"></div>
</div>
</div>
<div class="tabbar-slide-container"></div>
</div>

script:

import Swiper from 'swiper'
import '../../node_modules/swiper/dist/css/swiper.min.css' export default {
name: 'vueTabbarSlide',
props: ['options'],
data () {
return {
mySwiper: null,
//数据
slideArr: this.options.slideData || ['slide1', 'slide2', 'slide3', 'slide4', 'slide5', 'slide6', 'slide7', 'slide8', 'slide9', 'slide10', 'slide11', 'slide12', 'slide13'],
//样式
slideStyle: {
//宽度
width: this.options.width || '80px',
//高度
height: this.options.height || '40px',
//垂直高度
lineHeight: this.options.height || '40px',
//文本排列方式
textAlign: this.options.textAlign || 'center',
//字体大小
fontSize: this.options.fontSize || '14px',
//字体格式
fontFamily: this.options.fontFamily || 'Microsoft YaHei',
//默认字体颜色
color: this.options.color || '#333',
//选中字体颜色
checkedColor: this.options.checkedColor || '#00a0e9'
},
downLineStyle: {
//下划线高度
downLineHeight: this.options.downLineHeight || '2px',
//下划线颜色
downLineColor: this.options.downLineColor || '#00a0e9',
},
//选项
slideOptions: {
slideIndex: this.options.index || 0
},
//下划线
slideDownLine: null
}
},
watch: {
options: {
//此处不要用箭头函数,this会跑偏 ^_^
handler: function(newValue, oldValue) {
if (this.mySwiper) {
this.mySwiper.destroy(true, false)
}
this.mySwiper = new Swiper(`.${this.options.container}`, {
slidesPerView: "auto",
freeMode: true,
freeModeMomentumRatio: 0.5,
observer: true,
observeParents: false,
on: {
init: () => {
//默认选中
this.slideOptions.slideIndex = this.options.index || 0
//下划线
this.$refs.slideDownLine.style.transform = `translateX(${this.slideOptions.slideIndex*parseInt(this.slideStyle.width)}px)`
//回调函数
this.$emit("callback", event, this.slideOptions.slideIndex, this.options.slideData[this.slideOptions.slideIndex])
},
tap: () => {
//滑动时间
this.mySwiper.setTransition(300)
//滑动
this.slide(swiperWidth, maxTranslate, maxWidth)
//更改class
this.slideOptions.slideIndex = this.mySwiper.clickedIndex
//下划线
this.$refs.slideDownLine.style.transform = `translateX(${this.slideOptions.slideIndex*parseInt(this.slideStyle.width)}px)`
//回调函数
this.$emit("callback", event, this.mySwiper.clickedIndex, event.target.innerText)
}
}
});
//swiper可视宽度
const swiperWidth = this.mySwiper.width
//swiper最大移动距离
const maxTranslate = swiperWidth - (parseInt(this.options.width) * this.options.slideData.length)
//
const maxWidth = -maxTranslate + swiperWidth / 2
   },
   deep: true
}
},
methods: {
slide(swiperWidth, maxTranslate, maxWidth) {
//点击的slide
const slide = this.mySwiper.slides[this.mySwiper.clickedIndex]
//点击的slide offsetLeft距离浏览器左边距离
const slideLeft = slide.offsetLeft
//点击的slide的可视宽度
const slideWidth = slide.clientWidth
// 被点击slide的中心点
const slideCenter = slideLeft + slideWidth / 2
//当中心点距离少于一半宽度时
if (slideCenter < swiperWidth / 2) { this.mySwiper.setTranslate(0) } else if (slideCenter > maxWidth) { this.mySwiper.setTranslate(maxTranslate) } else { const nowTlanslate = slideCenter - swiperWidth / 2 this.mySwiper.setTranslate(-nowTlanslate) }
//选中颜色
slide.style.color = this.downLineStyle.downLineColor
}
}
}

App.vue

template:

<div id="app">
<vue-tabbar-slide :options="options" @callback="callback"></vue-tabbar-slide>
<vue-tabbar-slide1 :options="options1" @callback="callback1"></vue-tabbar-slide1> <div @click="getData">点击获取数据</div>
<div>第一行下标及数据{{callbackHtml}},<br>第二行下标及数据{{callbackHtml1}}</div>
</div>

script:

import vueTabbarSlide from './lib/vueTabbarSlide'

export default {
name: 'app',
data () {
return {
options: {
container: 'mySlide1',
slideData: [],
width: '80px',
index: 1
},
options1: {
container: 'mySlide2',
slideData: [],
width: '80px',
index: 1
},
callbackHtml: '',
callbackHtml1: ''
}
},
components: {
vueTabbarSlide: vueTabbarSlide,
vueTabbarSlide1: vueTabbarSlide
},
methods: {
getData () {
this.options.slideData = ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9', 'data10']
this.options1.slideData = ['data11', 'data21', 'data31', 'data41', 'data51', 'data61']
},
callback (event, index, val) {
this.callbackHtml = index + ';' + val
},
callback1 (event, index, val) {
this.callbackHtml1 = index + ';' + val
},
}
}

在使用中有问题请先去github中查看是否更新到最新版本

如果在新版本中未解决,欢迎您在此或github中给我issure,这样会让我开心很长时间,我也会在第一时间认真解决您的问题

最后,感谢您阅读至此。

Vue 仿B站滑动导航的更多相关文章

  1. iOS仿今日头条滑动导航

    之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...

  2. 2017年11月8日最新仿互站导航t5友价商城-9套模板首页都增加微信登陆

    今天测试效果如下,直接看图吧,入口在下方,点击图片直达 把9套餐模板都添加了微信首页登陆,仿互站的导航,操作比互站还要方便,官方一直对https 支持不太友好,索性把所有的https bug都修复了, ...

  3. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  4. (https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航

    (https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航 首页支持微信登陆,只有第8套模板支持(endv模板),后 ...

  5. Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果

    探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...

  6. vue 仿今日头条

    vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...

  7. 我的Vue之旅、05 导航栏、登录、注册 (Mobile)

    第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...

  8. jquery仿天猫商城左侧导航菜单

    之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...

  9. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

随机推荐

  1. Android数据库框架——ORMLite轻量级的对象关系映射(ORM)Java包

    Android数据库框架--ORMLite轻量级的对象关系映射(ORM)Java包 事实上,我想写数据库的念头已经很久了,在之前写了一个答题系统的小项目那只是初步的带了一下数据库,数据库是比较强大的, ...

  2. Java 学习之反射机制“解刨”分解类,并获取内容!

    正常情况下,单纯的做开发是接触不到反射机制的(额,当然并不排除例外的情况了).下面我就对我学到的反射方面的知识做一个小小的总结,旨在复习和以后的查看. 原理分析: 所谓反射就是将一个类当做我们研究的对 ...

  3. .NET 连接SQL Server2012遇到的连接出错问题解析

    最近在用VS2013编写相关于SQL Server数据库的代码,但是却遇到了艰难的bug问题,那就是在进行连接的时候出现了各种异常. 出错分析 1.首先应该想到的是数据库的相关服务没有开启. 因为默认 ...

  4. leetcode 生成杨辉三角形, 118 119 Pascal's Triangle 1,2

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, Retu ...

  5. javascript之BOM编程Screen(屏幕)对象

    这个对象属性相对比较简单.掌握四个方法即可. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  6. (四十三)UITabBarController和AppDelegate的一些细节

    假设一个UITabBar是V1,V2,V3三个视图的根控制器. 一进入程序的时候,只会加载一个视图V1,也就是说UITabBar是延迟加载的. Tip:通过代码创建的UITabBar会一次性加载所有视 ...

  7. DQM Serial Sync Index Program ERROR

    Error syncing hz_stage_party_sites_t1:ORA-20000:Oracle Text 错误: DRG-10502:索引AR.HZ_STAGE_PARTY_SITES_ ...

  8. C#之面向对象

    话说三国时期,曹操带领百万大军攻打东吴,大军在长江赤壁驻扎,军船连成一片,眼看就要灭掉东吴,统一天下,曹操大悦,于是晏众文武,在酒席间,曹操诗兴大发,不觉吟道:"喝酒唱歌,人生真爽" ...

  9. Android的fuzz测试技术之符号执行浅谈-android学习之旅(82)

    简单的漏洞越来越少,需要改进目前的方法 : 通过符号执行,得出执行路径,然后在进行fuzzy是较为有效的方法之一 1)为待测单元自动地生成可到达的测试数据,即提高测试目标的覆盖率 2)根据特定的漏洞模 ...

  10. 动态获取html页面的内容,并且取其中的某块元素的方法

     $.ajax({  url: "http://192.168.1.59:8888/app-tpl-webapp/tpl/design.html",  async:false, ...