Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to implement WeChat Mini Programs custom bottom navigation bar components". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The details are as follows

1. Create a new tabbar.vue (custom navigation bar component defined) under the file price of the common components of your own project.

{{item.name}} / / import container from'@ / channelMessage/get-container' export default {props: {showTabbar: {type: Boolean, default: true,}, current: {/ / current page index type:Number, default:0},}, data () {return {selectedIndex: 0 TabList: [{name: "Home", iconPath: require (".. / static/image/img/tab-home-nor.png"), iconActivePath: require (".. / static/image/img/tab-home-sel.png"), path: "/ pages/index/index",} {name: "shopping cart", iconPath: require (".. / static/image/img/tab-cart-nor.png"), iconActivePath: require (".. / static/image/img/tab-cart-sel.png"), path: "/ pages/cart/cartEdit",} {name: "my", 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)},} } .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;}}

2. Add a code to the pages.json file in the project to ensure that the wx.switchTab in tabbar.vue can be used normally, as follows:

"tabBar": {"selectedColor": "# EE2F51", "list": [{"pagePath": "pages/index/index", "text": "Home", "iconPath": "static/image/img/tab-home-nor.png", "selectedIconPath": "static/image/img/tab-home-sel.png"}, {"pagePath": "pages/cart/cartEdit" "text": "cart", "iconPath": "static/image/img/tab-cart-nor.png", "selectedIconPath": "static/image/img/tab-cart-sel.png"}, {"pagePath": "pages/mine/mine", "text": "my", "iconPath": "static/image/img/tab-my-nor.png" "selectedIconPath": "static/image/img/tab-my-sel.png"}]}

3. Globally register custom components in main.js

Import tabBar from ". / customComponents/commonComponents/tabBar/index.vue"; / / change the location of your component. The index.vue here is the tabbar.vueVue.component ("tabBar", tabBar) mentioned earlier.

4. Introduce registered components on pages that need to use the navigation bar

/ / introduce the navigation bar component / / tag status for the page. Yes, the navigation bar can display different activation status data () {return {item_index: 0,}} / / hide the navigation bar onLoad () {wx.hideTabBar () provided with Wechat. }, "how to implement WeChat Mini Programs custom bottom navigation bar component" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.