이동 단 관성 슬라이딩&리 턴 Vue 네 비게 이 션 바 구성 요소 ly-tab 쓰기

얼마 전에 모 바 일 엔 드 의 자가 적응 슬라이딩 Vue 네 비게 이 션 바 구성 요 소 를 썼 는데 실용성 이 있다 고 생각 했 습 니 다.여러분 들 이 사용 할 수 있 을 것 같 습 니 다.필요 한 학생 은 프로젝트npm install ly-tab -S 또는yarn add ly-tab에서 사용 할 수 있 으 며 구체 적 인 용법 은 다음 과 같다.
자,효과 부터 봅 시다.
 
좋 습 니 다.쓸데없는 말 을 하기 시 작 했 습 니 다.실습 한 지 3 개 월 이 얼마 되 지 않 았 습 니 다.그 동안 지도 교수 님 을 따라 프로젝트 도 접 했 고 많은 것 을 배 웠 습 니 다.접 한 프로젝트 는 대체적으로 모 바 일 프로젝트 이 고 프레임 워 크 는 주로 Vue 를 사 용 했 습 니 다.이동 단 이나 이동 단 앱(퉤,개소리)을 사용 한 적 이 있 는 학생 들 은 위 와 같은 미끄럼 효과 가 있 는 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 의 데모 구현:

<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-item/> 구성 요소 의 index 색인 값 을 유일한 표지 값 으로 하면 되 지 않 습 니까?
질문 이 왔 습 니 다:어떻게 tab-item 구성 요소 내부 에서 자신의 index 값 을 찾 습 니까?
우선 ly-tab 구성 요소 <ly-tab-item/> 는 하나의 배열 입 니 다.각구성 요 소 는 순서대로 만 들 고 push 를 통 해 이 배열 을 삽입 하기 때문에 각구성 요 소 를 만 들 고 push 를$children 로 만 들 때구성 요소 에 있어 서$children구성 요소 마다 유일한 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 에서 볼 수 있 습 니 다.그래도 스타 를 시 켜 보 세 요.하하....................................................
아이고,아니 야,아니 야.왜 스타 를 구하 기 시 작 했 어.가장 중요 한 건 아직 얘 기 안 했 어.리 타 브 는 어떻게 사용 하지?
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);

그 후에 프로젝트 에서(this.$parent.$children.length || 1) - 1 와 <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
관성 이 미 끄 러 질 때의 민감 도(값 이 작 을 수록 저항력 이 크다)는 손 이 풀 린 후 속도 가 0 으로 줄 어드 는 데 걸 리 는 시간 과 비슷 하 다 고 볼 수 있다.
1000ms
reBoundingDuration
Number
재생 애니메이션 duration
360ms
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 이동 단 관성 미끄럼&리 턴 Vue 네 비게 이 션 바 구성 요소 ly-tab 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!