1, the preface

Share a complete wechat applet to customize Tabbar, Tabbar button can be set as a jump page, can also be set as a function button. Those too lazy to read the text can go directly to the bottom, where bloggers share GitHub addresses.

2,

Because the Tabbar function of wechat mini program is relatively simple, for example, to achieve a prominent circular scan button in the middle, you need to customize Tabbar.

The blogger creates a Tabbar component, writes his own style, and introduces the component to the page that needs to be used. The component uses position: Fixed at the bottom, so margin-bottom styles should be applied to pages that use the component. The interaction is through the bindtap event defined on the component to jump to the page or trigger the function module, where the route jump is using the wx.switchtab. Events and parameters can be triggerEvent;

3. Core code

File directory

Refer to the component

// In the page JSON
{
  "usingComponents": {
    "Tabbar":".. /.. /components/tabbar/tabbar"}}/ / in WXML
<Tabbar nowIndex="0" bind:switchDialog="switchDialog"/>
Copy the code

Components of the data

data: {
  tabbarList:[
    {
      index:0.pagePath:'.. /index/index'.title:"Home page".icon: ".. /.. /images/home.png".onIcon: ".. /.. /images/home1.png".color: "#9B9B9B".onColor: "#19C29C"}, {index:1.pagePath:' '.icon: ".. /.. /images/look.png".onIcon: ".. /.. /images/look.png"}, {index:2.pagePath:'.. /userCenter/userCenter'.title:"Personal Center".icon: ".. /.. /images/my.png".onIcon: ".. /.. /images/my1.png".color: "#9B9B9B".onColor: "#19C29C",}].}Copy the code

Component route jump

/ / switch
changePage(e){
  let { path,index } = e.currentTarget.dataset;
  if(index === 1) {this.chickLook();
    return false;
  };
  wx.switchTab({
    url: path
  });
}
Copy the code

Source making address: https://github.com/pdd11997110103/ComponentWarehouse

If you think it is helpful, I am @pengduo, welcome to like and follow the comments; END

The articles

  • Enumerative JS practical and powerful operator & operator
  • Wechat apPLETS API interaction custom encapsulation
  • Request encapsulation of wechat applets

Personal home page

  • CSDN
  • GitHub
  • Jane’s book
  • Blog garden
  • The Denver nuggets