手把手带你实现微信小程序自定义底部导航栏的方法

@import 'colorui/main.wxss';

@import 'colorui/icon.wxss';

@import 'colorui/animation.wxss';

**// custome-tab-bar/index.js**

/**

   * 组件的初始数据

   */

  data: {

    selected: 0,

    list: [{

        "pagePath": "/pages/home/home",

        "text": "首页",

        "iconPath": "/images/icon/basics.png",

        "selectedIconPath": "/images/icon/basics_cur.png"

      },

      {

        "pagePath": "/pages/my/my",

        "text": "我的",

        "iconPath": "/images/icon/component.png",

        "selectedIconPath": "/images/icon/component_cur.png"

      }

    ]

  }

<!--custom-tab-bar/index.wxml-->

<view class="cu-bar tabbar">

  <view wx:for="{{list}}" wx:key="index" class="action" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">

    <view class="cuIcon-cu-image">

      <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>

    </view>

    <view class="text-green">{{item.text}}</view>

  </view>

</view>

/**

   * 组件的方法列表

   */

  methods: {

    switchTab(e) {

      const data = e.currentTarget.dataset

      const url = data.path

      wx.switchTab({

        url

      })

      this.setData({

        selected: data.index

      })

    }

  }

// pages/my/my.js

/**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

    console.log("onShow")

    if (typeof this.getTabBar === 'function' && this.getTabBar()) {

      this.getTabBar().setData({

        selected: 1

      })

    }

  },