写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab


Posted in Javascript onMarch 06, 2018

前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用,具体用法下面会讲到。

好了,先看看效果吧

写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab 

好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本都是移动端项目,而且框架主要用的是Vue。做过移动端或者用过移动端APP(呸,屁话)的同学肯定会发现很多时候都会有类似上面这种有滑动效果的tab导航栏,相信大家肯定在掘金的首页就看到过。

实现思路

当时的项目中恰好也有这种需求,于是我想偷个懒直接使用 Mint-ui 组件库里现成的tabbar和tab-item组件,github上看了下它的实现源码发现只实现了切换功能但不能滑动,so,懒偷不了就只好自己写咯。

其实单单实现tab切换功能是不难的,看mint-ui使用的其实是v-model语法糖,就像下面这样

<ly-tab v-model="selected">
  <ly-tab-item></ly-tab-item>
</ly-tab>

下面是拆解v-model语法糖的实现

<ly-tab :value="selected" @input="selected = arguments[0]">
  <ly-tab-item></ly-tab-item>
</ly-tab>

然后只需要在tab-item组件内实现当自己被点击时,让其父组件也就是ly-tab组件 $emit 一个 input 事件,并传入一个标识每个tab-item的唯一值作为第一个参数,关于这个唯一值,mint-ui的做法需要用户自己手动给每个tab-item通过props传入一个唯一的id值,如下为Mint UI的Demo实现:

<mt-tabbar v-model="selected">
  <mt-tab-item id="订单">
    <img slot="icon" src="http://placehold.it/100x100">
    <span slot="label">订单</span>
  </mt-tab-item>
 </mt-tabbar>

但是,在看过大佬的 vue当中设计Tabbar插件时的思考 后觉得文章中的那种做法会更好一点,因为对于父组件 <ly-tab/> 来说,只要知道点击的是哪个 <ly-tab-item/> 就行了啊,那么我把每个 <ly-tab-item/> 组件的 index 索引值作为它的唯一标识值不就行了吗。

那么问题来了:怎么在tab-item组件内部取到自己的 index 值呢?

首先ly-tab组件的 $children 是一个数组,由于每个 <ly-tab-item/> 组件是依次创建并通过push的方式插入该数组,所以在每个 <ly-tab-item/> 组件创建并push到 $children 时,对于 <ly-tab-item/> 组件来说 (this.$parent.$children.length || 1) - 1 不就是每个 <ly-tab-item/> 组件唯一的 index 值了啊。实际上,到这里点击切换的功能就已经可以实现了。下面贴上tab-item.vue中的代码:

tab-item.vue

<template>
 <a class="ly-tab-item"
    :style="$parent.value === id ? activeStyle : {}"
    @click="$parent.$emit('input', id)">
  <div class="ly-tab-item-icon"><slot name="icon"></slot></div>
  <div class="ly-tab-item-label"><slot></slot></div>
 </a>
</template>
<script>
export default {
 name: 'LyTabItem',
 computed: {
  activeStyle () {
   return {
    color: this.$parent.activeColor,
    borderColor: this.$parent.activeColor,
    borderWidth: this.$parent.lineWidth,
    borderBottomStyle: 'solid'
   }
  }
 },
 data () {
  return {
   id: (this.$parent.$children.length || 1) - 1
  }
 }
}
</script>
<style lang="scss">
.ly-tab-item {
 text-decoration: none;
 text-align: center;
 .ly-tab-item-icon {
  margin: 0 auto 5px;
 }
 .ly-tab-item-label {
  margin: 0 auto 10px;
  line-height: 18px;
 }
}
</style>

关于tab.vue中触摸滑动、惯性滑动以及回弹等效果实现在这里就没办法详细讲了,有兴趣的小伙伴可以到github上查看, 点我去github查看项目 ,如果想看示例demo可以clone项目到本地跑一跑,写得不好的地方欢迎大家指正,如果觉得用得着或者能够帮到大家的话最好了,那也不妨点个star吧,哈哈......

哎哎哎,不对不对,怎么就开始求star了,最重要的还没讲呢—— ly-tab怎么使用呢?

如何使用 ly-tab

小伙伴们如果想使用ly-tab,需要在你的项目中通过npm或者yarn下载安装:

npm install ly-tab -S
or
yarn add ly-tab

接着在main.js中全局引入:

import Vue from 'vue';
import LyTab from 'ly-tab';
Vue.use(LyTab);

之后你就可以在你项目中任意使用 <ly-tab></ly-tab> <ly-tab-item></ly-tab-item> 组件而不需要再次引入了

栗子

<ly-tab v-model="selected" fixBottom>
 <!-- selected是你自己定义的一个在data中用于存放当前tab-item的索引值的变量 -->
 <ly-tab-item v-for="(item, index) in tabList" :key="index">
  {{item.itemName}}
 </ly-tab-item>
</ly-tab>

上面的栗子其实只是tabbar的实现,大家项目中肯定还需要做视图区的切换,在这里简单说一下我目前的做法:

  • 使用Vue-router做router-view的切换
  • 使用动态组件(可以配合异步组件使用)

我暂时的话好像只用过这两种,不知道大家还有其他什么更好的方法,欢迎分享~

配置项

可以给 <ly-tab></ly-tab> 组件传入一些配置项以自定义你想要的效果

配置项 类型 描述 默认值
lineWidth Number fixBottom为false时tabbar底部border-width 1px
activeColor String 激活状态下字体color以及border-bottom-color red
fixBottom Boolean 是否固定在视图底部(为false时不可滑动) false
additionalX Number 近似等于超出边界时最大可拖动距离 50px
reBoundExponent Number 惯性回弹指数(值越大,幅度越大,惯性回弹距离越长) 10
sensitivity Number 惯性滑动时的灵敏度(值越小,阻力越大),可近似认为手松开后速度减为零所需时间 1000ms
reBoundingDuration Number 回弹动画duration 360ms

总结

以上所述是小编给大家介绍的写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
js处理表格对table进行修饰
May 26 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 #Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
angular4 JavaScript内存溢出问题
Mar 06 #Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 #Javascript
vue中本地静态图片路径写法
Mar 06 #Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 #Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 #Javascript
You might like
PHP实现MySQL更新记录的代码
2008/06/07 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
python回调函数用法实例分析
2015/05/09 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
用Python shell简化开发
2018/08/08 Python
python实现三次样条插值
2018/12/17 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
详解python中各种文件打开模式
2020/01/19 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
写好自荐信要注意的问题
2013/11/10 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
个人道歉信大全
2019/04/11 职场文书