我的h5-vue框架學習之實現頁面底部導航菜單(一)

我們用vant組件庫來實現底部導航功能

我的h5-vue框架學習之實現頁面底部導航菜單(一)

按方式三引入全部的vant


我的h5-vue框架學習之實現頁面底部導航菜單(一)

複製粘貼到main.js


我的h5-vue框架學習之實現頁面底部導航菜單(一)

回到vant找到組件Tabbar的路由模式複製


我的h5-vue框架學習之實現頁面底部導航菜單(一)

放到home頁面,可以再複製2個標籤,這樣底部就是4個


我的h5-vue框架學習之實現頁面底部導航菜單(一)

效果如上圖,底部是4個標籤

我的h5-vue框架學習之實現頁面底部導航菜單(一)

當點擊搜索圖標時,導航菜單消失了,這不是我們想要的效果

導航菜單為什麼消失了?其實和我們的代碼思維邏輯有關係,還有是對vue的學習程度不夠深刻。當我們把導航添加到home時就已經是錯的了。為什麼這麼說,我們下節課再講


分享到:


相關文章: