집 > 기사 > 웹 프론트엔드 > 필기 모바일 단말기 관성 슬라이딩 및 리바운드 Vue 네비게이션 바 구성 요소 문제(자세한 튜토리얼)

필기 모바일 단말기 관성 슬라이딩 및 리바운드 Vue 네비게이션 바 구성 요소 문제(자세한 튜토리얼)

亚连원래의: 2018-06-01 09:34:292340검색

얼마전에 모바일 단말기 관성 슬라이딩 & 리바운드 Vue 네비게이션 바 컴포넌트 ly-tab을 작성했는데, 프로젝트 할 때 유용하게 쓸 수 있을 것 같아요. 관심 있는 친구들이 함께 배워보면 좋을 것 같아요

모바일 단말기를 위한 적응형 슬라이딩 Vue 탐색 모음 구성 요소입니다. 실용성이 있고 누구나 사용할 수 있다고 생각합니다(물론 일부 대기업이 스스로 더 잘 작성하면 필요하지 않습니다). 며칠 전에 출시되었으며 npm 및 GitHub로 이동하고, 저를 클릭하여 npm으로 이동하고, 저를 클릭하여 GitHub 프로젝트로 이동하세요. 필요한 학생은 npm install ly-tab -S 또는 에서 code>yarn add ly-tabnpm 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://placehold.it/100x100">
    <span slot="label">订单</span>
  </mt-tab-item>
 </mt-tabbar>

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

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

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

tab-item.vue

<template>
 <a class="ly-tab-item"
    :style="$parent.value === id ? activeStyle : {}"
    @click="$parent.$emit(&#39;input&#39;, id)">
  <p class="ly-tab-item-icon"><slot name="icon"></slot></p>
  <p class="ly-tab-item-label"><slot></slot></p>
 </a>
</template>
<script>
export default {
 name: &#39;LyTabItem&#39;,
 computed: {
  activeStyle () {
   return {
    color: this.$parent.activeColor,
    borderColor: this.$parent.activeColor,
    borderWidth: this.$parent.lineWidth,
    borderBottomStyle: &#39;solid&#39;
   }
  }
 },
 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 &#39;vue&#39;;
import LyTab from &#39;ly-tab&#39;;
Vue.use(LyTab);

之后你就可以在你项目中任意使用 9d348b1576b0fe7a72e7288531b7f4cb0bdb4ac5e886e2373913b98c5fb13a61 和 01c42ec90662011463312bcda261ffe1aa305500b83fe4f644281d98fad70cd1 组件而不需要再次引入了

栗子

<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的切换
使用动态组件（可以配合异步组件使用）

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

配置项

可以给 9d348b1576b0fe7a72e7288531b7f4cb0bdb4ac5e886e2373913b98c5fb13a61

자, 먼저 효과를 살펴보겠습니다🎜

🎜🎜자, 헛소리부터 시작하겠습니다. 인턴십을 한 지 거의 3개월이 지났습니다. 그동안 멘토님과 함께 몇 가지 프로젝트를 접했고, 배운 것도 있었습니다. 제가 접한 프로젝트는 기본적으로 모바일 프로젝트이고, 프레임워크는 주로 Vue를 사용합니다. 모바일 장치에서 작업했거나 모바일 앱(아, 헛소리)을 사용해 본 학생들은 위와 같은 슬라이딩 효과가 있는 탭 탐색 모음이 있다는 것을 분명히 Nuggets 홈페이지에서 본 적이 있을 것입니다. . 🎜🎜구현 아이디어🎜🎜당시 프로젝트에서 우연히 이런 수요가 있어서 게을러서 Mint를 사용하고 싶었어요- ui 컴포넌트 직접 라이브러리에 이미 만들어진 tabbar와 tab-item 컴포넌트가 있는데, github에서 구현 소스 코드를 살펴보니 전환 기능만 구현하고 있고 슬라이드가 안 되는 것을 발견했습니다. 직접 작성해야 합니다. 🎜🎜사실 탭 전환 기능을 구현하는 것은 어렵지 않습니다. Mintui는 실제로 아래와 같이 v-model 구문 설탕을 사용합니다🎜rrreee🎜다음은 v-model 구문 설탕 구현을 분해한 것입니다🎜rrreee🎜 그런 다음 탭 항목 구성 요소를 클릭하면 상위 구성 요소인 ly-tab 구성 요소가 $입력 이벤트를 내보내고 각 탭을 식별하는 고유 값을 전달하도록 해야 합니다. item을 첫 번째 매개변수로 사용하려면 mint-ui에서 사용자가 props를 통해 각 탭 항목에 고유한 id 값을 수동으로 전달해야 합니다. 다음은 Mint UI의 데모 구현입니다. 사장님의 뷰를 보고 Tabbar 플러그인을 디자인할 때 고민한 끝에 기사에 나온 접근 방식이 더 좋을 것 같다고 느꼈습니다. 왜냐하면 상위 컴포넌트인 ff754a02341768d67ab6bd649092876e에 대해서는 49b14403f7feb87e8d7ba13ccc2da3b3 이면 각 65fe46050855859f5f7904187bc703d9 구성 요소의 색인 값을 사용할 수 있습니다. 고유한 식별 값으로 사용됩니다. 🎜🎜그러면 질문이 생깁니다. 탭 항목 구성 요소 내에서 자체 색인 값을 얻는 방법은 무엇입니까?🎜🎜우선, ly-tab 구성 요소의 <code>$children 은 각 <이므로 배열입니다. ;ly- tab-item/> 구성 요소는 순차적으로 생성되어 푸시에 의해 배열에 삽입되므로 각 65fe46050855859f5f7904187bc703d9 구성 요소가 생성되어 $children에 푸시됩니다. , for 65fe46050855859f5f7904187bc703d9 구성 요소의 경우 (this.$parent.$children.length || 1) - 1 은 각 3bcb7e0e99c6272f77740b96dadaee61 구성요소의 고유 인덱스 값입니다. 실제로 클릭-전환 기능은 이미 여기에서 구현될 수 있습니다. 아래 tab-item.vue에 코드를 붙여넣으세요. 🎜🎜tab-item.vue🎜rrreee🎜 tab.vue의 터치 슬라이딩, 관성 슬라이딩 및 리바운드 효과 구현에 대해서는 여기서 자세히 설명할 수 없습니다. 관심이 있는 친구들은 github에서 확인할 수 있습니다. github에서 프로젝트를 확인하려면 저를 클릭하세요. 샘플 데모를 보려면 프로젝트를 로컬로 복제하여 실행할 수 있습니다. 문제가 있으면 수정해 주세요. 유용하거나 도움이 될 수 있다고 생각하시면 별표를 눌러주시면 됩니다. 하하...🎜🎜아니요, 아니, 왜 별표를 요구하시나요? 아직 설명되지 않았습니다. ly-tab을 사용하는 방법은 무엇입니까? 🎜🎜ly-tab 사용 방법🎜🎜ly-tab을 사용하려면 npm을 통과하거나 다운로드하여 설치해야 합니다. Yarn: 🎜rrreee🎜 그런 다음 main.js에 전역적으로 도입합니다. 🎜rrreee🎜 그런 다음 9d348b1576b0fe7a72e7288531b7f4cb0bdb4ac5e886e2373913b98c5fb13a61 및 7d594dd20b38f588d4ba2486159af10caa305500b83fe4f644281d98fad70cd1 컴포넌트를 다시 소개할 필요 없이🎜🎜Chestnut🎜rrreee🎜위의 chestnut은 실제로는 탭바입니다. 프로젝트에서 보기 영역을 전환해야 합니다. 여기서는 현재 접근 방식에 대해 간략하게 설명하겠습니다. 🎜

🎜Vue-router를 라우터 보기 전환으로 사용🎜 li>
🎜동적 구성요소 사용(비동기 구성요소와 함께 사용 가능)🎜

🎜당분간 이 두 가지만 사용한 것 같은데 또 어떤 것이 있는지는 모르겠습니다. 좋은 방법입니다. 공유해 보세요~🎜🎜구성 항목🎜🎜일부 구성 항목을 9d348b1576b0fe7a72e7288531b7f4cb0bdb4ac5e886e2373913b98c5fb13a61 구성 요소에 전달할 수 있습니다. 사용자 정의 원하는 효과를 정의하세요🎜

구성 항목	Type	Description	기본값
lineWidth	Number	fixBottom은 탭바 하단 테두리 너비	1px일 때 false입니다.
activeColor	String	활성화 시 글꼴 색상 및 border-bottom-color	red
fixBottom	Boolean	이 뷰 하단에 고정되는지 여부(false인 경우 슬라이드할 수 없음)	false
additionalX	Number	경계를 초과할 때 드래그할 수 있는 최대 거리와 대략 같습니다.	50px
reBoundExComponent	Number	관성 반발 지수(값이 클수록 진폭이 커질수록 관성 반발 거리가 길어집니다)	10
sensitivity	Number	관성 슬라이딩 중 감도(값이 작을수록 저항이 커짐). 손을 놓은 후 속도가 0으로 감소하는 데 필요한 시간으로 근사화할 수 있습니다.	1000ms
reBoundingDuration	Number	리바운드 애니메이션 기간	360ms

위 내용은 나중에 도움이 되기를 바랍니다.

필기 모바일 단말기 관성 슬라이딩 및 리바운드 Vue 네비게이션 바 구성 요소 문제(자세한 튜토리얼)

관련 기사