写一个移动端惯性滑动&回弹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的拖动布局插件
Nov 25 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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 随机数的深入理解
2013/06/05 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
js style动态设置table高度
2014/10/21 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
python不同系统中打开方法
2020/06/23 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
给排水工程师岗位职责
2013/11/21 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
厨师长岗位职责
2014/03/02 职场文书
期中考试后的感想
2015/08/07 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript