微信小程序自定義底部導(dǎo)航欄組件
本文實(shí)例為大家分享了微信小程序底部導(dǎo)航欄組件的具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
1、在自己項(xiàng)目的公共組件的文件價(jià)下新建tabbar.vue(定義的自定義導(dǎo)航欄組件)
<template> <view v-if="showTabbar" class="tabbar"> <view v-for="(item, index) in tabList" :key="index" class="icon" @click="switchTabBar(item.path, index)" > <image :src="index == current ? item.iconActivePath : item.iconPath"></image> <text :class="index == current ? 'active_text' : 'text'" bindtap = 'go'>{{ item.name }}</text> </view> </view> </template> <script> // import container from '@/channelMessage/get-container' export default { props: { showTabbar: { type: Boolean, default: true, }, current:{ // 當(dāng)前頁(yè)面index type:Number, default:0 }, }, data() { return { selectedIndex: 0, tabList: [ { name: "首頁(yè)", iconPath: require("../../../static/image/img/tab-home-nor.png"), iconActivePath: require("../../../static/image/img/tab-home-sel.png"), path: "/pages/index/index", }, { name: "購(gòu)物車", iconPath: require("../../../static/image/img/tab-cart-nor.png"), iconActivePath: require("../../../static/image/img/tab-cart-sel.png"), path: "/pages/cart/cartEdit", }, { name: "我的", iconPath: require("../../../static/image/img/tab-my-nor.png"), iconActivePath: require("../../../static/image/img/tab-my-sel.png"), path: "/pages/mine/mine", }, ], } }, onShow() { // const containerId = container.getContainerId() // if (containerId == '1000') { // this.showTabbar = false // } }, methods: { switchTabBar(path, index) { this.item_index = index wx.switchTab({ url: path, }) // this.$router.replace(path) }, }, } </script> <style lang="scss" scoped> .tabbar { position: fixed; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-around; width: 100%; height: 100rpx; background-color: #ffffff; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); .icon { display: flex; flex-direction: column; align-items: center; image { width: 50rpx; height: 50rpx; } } .active_text{ font-size: 20rpx; margin-top: 5rpx; color: #d81e06; } .text{ font-size: 20rpx; margin-top: 5rpx; } } </style>
2、在項(xiàng)目中的pages.json文件中新增代碼,保證tabbar.vue中的wx.switchTab可以正常使用,代碼如下:
"tabBar": { "selectedColor": "#EE2F51", "list": [{ "pagePath": "pages/index/index", "text": "首頁(yè)", "iconPath": "static/image/img/tab-home-nor.png", "selectedIconPath": "static/image/img/tab-home-sel.png" },{ "pagePath": "pages/cart/cartEdit", "text": "購(gòu)物車", "iconPath": "static/image/img/tab-cart-nor.png", "selectedIconPath": "static/image/img/tab-cart-sel.png" },{ "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/image/img/tab-my-nor.png", "selectedIconPath": "static/image/img/tab-my-sel.png" }] },
3、在main.js中全局注冊(cè)自定義組件
import tabBar from "./customComponents/commonComponents/tabBar/index.vue"; //換自己的組件位置,這里的index.vue就是前面所說(shuō)的tabbar.vue Vue.component("tabBar", tabBar);
4、在需要使用導(dǎo)航欄的頁(yè)面引入注冊(cè)的組件
//為頁(yè)面引入導(dǎo)航欄組件 <tabBar :current=item_index></tabBar> //標(biāo)記狀態(tài),是的導(dǎo)航欄可以根據(jù)頁(yè)面顯示不同的激活狀態(tài) data() { return { item_index: 0, } } //隱藏微信自帶的導(dǎo)航欄 onLoad() { wx.hideTabBar(); },
5、展示效果
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò)問(wèn)題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò),ES6模塊化提供了export命令和import?命令,對(duì)于模塊的導(dǎo)出和引入,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07js DIV滾動(dòng)條隨機(jī)位置的設(shè)置技巧
剛才一個(gè)朋友告訴我他的blog友情鏈接太多了,所以把所有鏈接放到一個(gè)DIV中,加了個(gè)滾動(dòng)條,可是他又不想每次別人來(lái)看,看到的都是前面幾個(gè)鏈接,于是問(wèn)我有沒(méi)有什么辦法,想了一個(gè),呵呵,正好有個(gè)辦法2008-11-11基于javascript bootstrap實(shí)現(xiàn)生日日期聯(lián)動(dòng)選擇
這篇文章主要介紹了基于javascript bootstrap實(shí)現(xiàn)生日日期聯(lián)動(dòng)選擇的相關(guān)資料,需要的朋友可以參考下2016-04-04ES6 Generator函數(shù)的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Generator函數(shù)的應(yīng)用,結(jié)合實(shí)例形式分析了ES6 Generator函數(shù)異步操作與異常捕獲相關(guān)使用技巧,需要的朋友可以參考下2019-06-06javascript容錯(cuò)處理代碼(屏蔽js錯(cuò)誤)
本文主要介紹了javascript的容錯(cuò)處理代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01在Web關(guān)閉頁(yè)面時(shí)發(fā)送Ajax請(qǐng)求的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于如何在Web關(guān)閉頁(yè)面時(shí)發(fā)送Ajax請(qǐng)求的實(shí)現(xiàn)方法,文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03js實(shí)現(xiàn)多行文本框統(tǒng)計(jì)剩余字?jǐn)?shù)功能
本文主要介紹了js實(shí)現(xiàn)多行文本框統(tǒng)計(jì)剩余字?jǐn)?shù)功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03