How to customize the tabbar component in a mini program to achieve bottom tab switching-Mini Program Development-php.cn

This article will introduce to you how to customize the tabbar component in the mini program page to achieve bottom tab switching.

How to customize the tabbar component in a mini program to achieve bottom tab switching

Recent requirements, the design draft is as shown

How to customize the tabbar component in a mini program to achieve bottom tab switching

To implement a special bottom navigation bar, use the official provided Customize the tabbar component, add the bottom tab page, and switch the image splash screen. [Related learning recommendations:小program development tutorial]

Solution to using swiper carousel chart custom component

1. Write a custom component jtab -bar

wxml file

   {{item.text}}

Copy after login

js file

Component({ data: { selected: 0, color: "#999999", selectedColor: "#032F82", list: [ { type: 'text', text: "首页" }, { type: 'image', icon: '../../image/icon_map.png', iconSelect: '../../image/icon_map_select.png', text: '' }, { type: 'text', text: "我的" }] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset this.setData({selected: data.index}) this.triggerEvent("setTab", data.index) } } })

Copy after login

wxss file

.jtab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 100rpx; background: white; display: flex; align-items: center; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0px -2rpx 2rpx rgba(153, 153, 153, 0.1); } .jtab-bar-item { text-align: center; flex: 1; height: 100rpx; } .jtab-bar-item .jtab-text { height: 100rpx; line-height: 100rpx; } .jcover-img-bigicon { position: fixed; bottom: 0rpx; width: 210rpx; height: 128rpx; padding-bottom: env(safe-area-inset-bottom); margin: 0 auto; right: 0; left: 0; }

Copy after login

Two pictures used:

How to customize the tabbar component in a mini program to achieve bottom tab switching

2. Use

wxml file in the page

    {{item}}

Copy after login

Use catchtouchmove="swipperStop" swipperStop is an empty function. Processing, manual sliding is prohibited

wxss file

.jswipper-block { height: calc(100vh - 170rpx); background: #F7F8F9; }

Copy after login

js file

/** * 页面的初始数据 */ data: { background: ['demo-text-1', 'demo-text-2', 'demo-text-3'], currentTab: 0 }, setTabbar({detail}) { this.setData({currentTab: detail}) }, // 轮播图 禁止手动滑动 catchtouchmove="swipperStop" swipperStop(){ },

Copy after login

is temporarily completed.

For more programming related knowledge, please visit:Programming Video! !

The above is the detailed content of How to customize the tabbar component in a mini program to achieve bottom tab switching. For more information, please follow other related articles on the PHP Chinese website!