Vue 仿B站滑动导航
仿照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站滑动导航的更多相关文章
- iOS仿今日头条滑动导航
之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...
- 2017年11月8日最新仿互站导航t5友价商城-9套模板首页都增加微信登陆
今天测试效果如下,直接看图吧,入口在下方,点击图片直达 把9套餐模板都添加了微信首页登陆,仿互站的导航,操作比互站还要方便,官方一直对https 支持不太友好,索性把所有的https bug都修复了, ...
- 仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...
- (https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航
(https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航 首页支持微信登陆,只有第8套模板支持(endv模板),后 ...
- Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果
探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...
- vue 仿今日头条
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- 我的Vue之旅、05 导航栏、登录、注册 (Mobile)
第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- 一款基于jQuery的仿百度首页滑动选项卡
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- awk:快速入门(简单实用19例+鸟哥书内容)
awk 用法:awk ' pattern {action} ' 变量名 含义 ARGC 命令行变元个数 ARGV 命令行变元数组 FILENAME 当前输入文件名 FNR 当前文件中的记录号 ...
- 【一天一道LeetCode】#94. Binary Tree Inorder Traversal
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- postman使用—chrome版
如果大家不知道怎么安装,请下载个FQ软件(蓝灯,shadowsocks)都是可以的,安装完成之后,你可以在chrome看到posman的插件程序. 使用说明: 安装完成之后,使用chrome://ap ...
- SimpleDateFormat用法大全及易错分析
SimpleDateFormat 使用java语言处理日期相关操作,就不可避免的会使用到SimpleDateFormat.当然了,目前我们采用较多的是Calendar类,通过对之求相关的属性值即可得到 ...
- 海量数据挖掘MMDS week2: 频繁项集挖掘 Apriori算法的改进:基于hash的方法
http://blog.csdn.net/pipisorry/article/details/48901217 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...
- (四十七)Quartz2D引擎初步
Quartz2D是跨平台的,同时支持iOS与Mac. 支持圆型裁剪,可以实现圆形头像等功能,也支持手势解锁.折线图等的制作. 对于复杂的UI界面,还可以通过Quartz2D将控件内部的结构画出来,可用 ...
- ssh连接原理介绍( 无密码连接登录的原理)
SSH(Secure Shell)一种在不安全网络上提供安全远程登录及其它安全网络服务的协议.由客户端和服务端的软件组成的,有两个不兼容的版本分别是:1.x和2.x.(SSH 2.x的客户程序是不能 ...
- python异常处理和断言
http://blog.csdn.net/pipisorry/article/details/21841883 关于异常处理有必要么的讨论 最重要的问题是你在开发过程中隐藏了bug,如果当时你没加这个 ...
- Java进阶(八)Java加密技术之对称加密 非对称加密 不可逆加密算法
对称加密 非对称加密 不可逆加密算法 根据密钥类型不同可以将现代密码技术分为两类:对称加密算法(私钥密码体系)和非对称加密算法(公钥密码体系). 1 对称加密算法 原理 对称加密算法中,数据加密和解密 ...
- Android View底层到底是怎么绘制的
Android绘制链图: 网上很多讲Android view的绘制流程往往只讲到了Measure - Layout - Draw. 但是,这只是一个大体的流程,而我们需要探讨的是Android在我们 ...