寫一個移動端慣性滑動&回彈Vue導航欄元件 ly-tab

寫一個移動端慣性滑動&回彈Vue導航欄元件 ly-tab
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

前段時間寫了一個移動端的自適應滑動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://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> 元件傳入一些配置項以自定義你想要的效果

配置項型別描述預設值
lineWidthNumberfixBottom為false時tabbar底部border-width1px
activeColorString啟用狀態下字型color以及border-bottom-colorred
fixBottomBoolean是否固定在檢視底部(為false時不可滑動)false
additionalXNumber近似等於超出邊界時最大可拖動距離50px
reBoundExponentNumber慣性回彈指數(值越大,幅度越大,慣性回彈距離越長)10
sensitivityNumber慣性滑動時的靈敏度(值越小,阻力越大),可近似認為手鬆開後速度減為零所需時間1000ms
reBoundingDurationNumber回彈動畫duration360ms

總結

以上所述是小編給大家介紹的寫一個移動端慣性滑動&回彈Vue導航欄元件 ly-tab,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對指令碼之家網站的支援!

您可能感興趣的文章:

Vue.js滑鼠懸浮更換圖片功能Webpack實現按需打包Lodash的幾種方法詳解JavaScript lodash常見用法系列小結vue移動UI框架滑動載入資料的方法vue 路由頁面之間實現用手指進行滑動的方法vue2.0 better-scroll 實現移動端滑動的示例程式碼基於Vue實現頁面切換左右滑動效果vue loadmore 元件滑動載入更多原始碼解析vue實現一個移動端遮蔽滑動的遮罩層例項vue jquery lodash實現滑動時頂部懸浮固定效果

相關文章

前端開發 最新文章