How to set toolbar in Wechat Applet

Question

I want to set toolbar with 3 or 4 icon buttons. When an icon is clicked, a slider with a select box should appear. Is a toolbar component and a select dropdown slider component available in the Wechat Mini program?

Customised tool bar

Answer 1

var sys= wx.getSystemInfoSync() 
var menu = wx.getMenuButtonBoundingClientRect() 

var statusHeight = menu.statusBarHeight
var titleHeight = menu.height
var titleRowWidth = sys.right - menu.right
var titleColumnHeight = menu.top - menu.statusBarHeight

Fisrt,open the file "app.json". Updating the value of "navigateionStyle" as "custom",and then the pageHeader will display.You can custom the top part of page.But the menu "button" like capsule at right-top of page will exist there.So you could calculate some parameters.

Maybe,the image will help you understand this. ABout your searchBar,you can use this method to create your custom labels.If you need to use it in some pages,you can package this as a custom component.