vue2 0實現底部導航切換效果

2022-02-11 03:46:31 字數 954 閱讀 9148

使用vue2.0寫移動端的時候,經常會寫底部導航效果,點選切換路由效果,實現和文字顏色切換。vue2.0也提供了很多ul框架供我們實現效果,今天就用原生的實現乙個底部導航切換,直接上**:

效果圖

路由搭建

export default new router(,,,

,,

, ]

});

頁面模板搭建,src和on都要動態的繫結,使用三目運算判斷每次點選切換

首頁    

推薦

搜尋

聊天

我的

在data裡面定義tabbarimgarr:陣列,用於存放。

tabbarimgarr:[   //切換,,

,,

]

在methods實現switchto切換

methods:

}

css樣式效果

.bottom-tab

width

100%height 50px

background-color #fff

position

fixed

left 0px

bottom 0px

display flex

z-index 999

.tab-item

display flex

flex

1flex-direction column

align-items center

justify-content center

font-size 14px

color #

666img

width

35%margin-bottom 2px

.oncolor red

vue 實現底部導航欄

解決辦法 1.新建四個或者多個頁面 index.vue,classify.vue,shoppcart.vue,my.vue 2.新建tabbar.vue頁面 tab bar 名叫插槽,在這邊主要起到的是佔位的作用3.新建tabbaritem.vue頁面 class tab bar item clic...

vue2 0路由之程式設計式導航

router.push location 想要導航到不同的 url,則使用router.push方法。這個方法會向 history 棧新增乙個新的記錄,所以,當使用者點選瀏覽器後退按鈕時,則回到之前的 url。當你點選時,這個方法會在內部呼叫,所以說,點選等同於呼叫router.push 宣告式程式...

vue2 0模擬錨點實現定位

如果是傳統專案,這個效果就非常簡單。但是放到 vue 中,就有兩大難題 1.在沒有 jquery 的 animate 方法的情況下,如何實現平滑滾動?2.如何監聽頁面滾動事件?在瀏覽了大量文章 進行多次嘗試之後,終於解決了這些問題 期間主要涉及到了 settimeout 的遞迴用法,和 vue 生命...