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

 更新时间:2018年03月06日 14:13:17   作者:ScoutYin  
前一段时间小编写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab,觉的非常实用,大家可能在做项目时会用到,感兴趣的朋友跟随程序员之家小编一起学习吧
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add 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://9i0i.com/pic.php?p=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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持!

相关文章

  • vue3在setup中使用mapState解读

    vue3在setup中使用mapState解读

    这篇文章主要介绍了vue3在setup中使用mapState方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue2使用cube-ui?实现搜索过滤、高亮功能

    Vue2使用cube-ui?实现搜索过滤、高亮功能

    cube-ui?是基于?Vue.js?实现的精致移动端组件库,由于很长一段时间没有学习cube-ui?的功能实现示例代码了,今天通过本文给大家介绍下Vue2使用cube-ui?实现搜索过滤、高亮功能,感兴趣的朋友跟随小编一起看看吧
    2023-01-01
  • vue中对象数组去重的实现

    vue中对象数组去重的实现

    这篇文章主要介绍了vue中对象数组去重的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue-cli开发环境实现跨域请求的方法

    vue-cli开发环境实现跨域请求的方法

    本篇文章主要介绍了vue-cli开发环境实现跨域请求的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 写给新手同学的vuex快速上手指北小结

    写给新手同学的vuex快速上手指北小结

    这篇文章主要介绍了写给新手同学的vuex快速上手指北小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue移动端使用appClound拉起支付宝支付的实现方法

    vue移动端使用appClound拉起支付宝支付的实现方法

    这篇文章主要介绍了vue移动端使用appClound拉起支付宝支付的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 使用vue框架 Ajax获取数据列表并用BootStrap显示出来

    使用vue框架 Ajax获取数据列表并用BootStrap显示出来

    这篇文章主要介绍了使用vue框架 Ajax获取数据列表并用BootStrap显示出来,需要的朋友可以参考下
    2017-04-04
  • Vue中使用及封装websocket示例详解

    Vue中使用及封装websocket示例详解

    这篇文章主要为大家介绍了Vue中使用及封装websocket示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Vue执行方法,方法获取data值,设置data值,方法传值操作

    Vue执行方法,方法获取data值,设置data值,方法传值操作

    这篇文章主要介绍了Vue执行方法,方法获取data值,设置data值,方法传值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue3+vite多项目多模块打包(基于vite-plugin-html插件)

    vue3+vite多项目多模块打包(基于vite-plugin-html插件)

    这篇文章主要给大家介绍了关于vue3+vite基于vite-plugin-html插件实现多项目多模块打包的相关资料,现在很多小伙伴都已经使用Vite+Vue3开发项目了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07

最新评论

?


http://www.vxiaotou.com