写一个移动端惯性滑动&回弹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 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
PNG背景在不同浏览器下的应用
Jun 22 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
WebRTC记录音视频流(web技术分享)
Feb 24 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
优化php效率,提高php性能的一些方法
2011/03/24 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
自动更新作用
2006/10/08 Javascript
Code:findPosX 和 findPosY
2006/12/20 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
JSON Web Tokens的实现原理
2017/04/02 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
详解python itertools功能
2020/02/07 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Python sorted排序方法如何实现
2020/03/31 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
三年大学生活自我鉴定
2014/01/21 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
千与千寻观后感
2015/06/04 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
大学生社会实践感想
2015/08/11 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
创业计划书之酒厂
2019/10/14 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript