微信小程序自定义tabbar组件点击对应区域显示凸起效果

	今天呢，看到设计图，难搞啊，要自定义组件，是时候动动脑子了，哈哈。

我呢，方法用的比较笨，代码有点冗余了，还望体谅哈

首先呢，先创建template文件夹，里面包含wxml，wcss和 js

先来wxml代码吧

  
    
    
    
    首页
    
  

  
    
    
    分类
    
  

  
    
    
    购物车
    
  

  
    
    
    个人中心
    
  

接着是wxss代码

page {
  background: #f8f7f6;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 105rpx; /*footer的高度*/
  background: #fff;
  z-index: 500;
  border-top: 1rpx solid #e9e9e9;
  display: flex;
  flex-direction: row;
}

.footer_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.footer-image {
  width: 50rpx;
  height: 50rpx;
  margin-top: 10rpx;

}

.footer-image2 {
  width: 50rpx;
  height: 50rpx;
  margin-top: 20rpx;
}

.footer-text2 {
  font-size: 24rpx;
  margin-top: 15rpx;
  color: #896D59;
}

.tab-img {
  position: absolute;
  top: -36rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
}

.footer-text {
  font-size: 24rpx;
  margin-top: 10rpx;
  color: #896D59;
}

最后再是js代码，可惜在别的界面用的太多，我以后在更改吧

// pages/template/template.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listInfo: [{
      text: '首页',
      imgUrl: '/pages/images/main.png',
      curUrl: '/pages/images/mian_lo1_on.png',
    },
    {
      text: '分类',
      imgUrl: '/pages/images/mian_lo2.png',
      curUrl: '/pages/images/mian_lo2_on.png',
    },
    {
      text: '购物车',
      imgUrl: '/pages/images/mian_lo3.png',
      curUrl: '/pages/images/mian_lo3_on.png',
    },
    {
      text: '个人中心',
      imgUrl: '/pages/images/mian_lo4.png',
      curUrl: '/pages/images/mian_lo4_on.png',
    }]
  },
  // 底部导航
  chooseImg: function (e) {
    var that = this
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
    console.log("kk", e.currentTarget.dataset.current)
    if (e.currentTarget.dataset.current == 0) {
      wx.switchTab({
        url: '/pages/index/index',
      })
    } else if (e.currentTarget.dataset.current == 1) {
      wx.switchTab({
        url: '/pages/classify/classify',
      })
    } else if (e.currentTarget.dataset.current == 2) {
      wx.switchTab({
        url: '/pages/car/car',
      })
    } else if (e.currentTarget.dataset.current == 3) {
      wx.switchTab({
        url: '/pages/person/person',
      })
    }
    that.onShow();
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.onLoad();
  },
})

然后呢，在app.json里肯定也是要有tabbar的，后续我会在app.js里隐藏的，继续看吧

{
  "pages": [
    
    "pages/index/index",
    "pages/classify/classify",
    "pages/car/car",
    "pages/person/person",
    "pages/template/template"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "你们项目的名字",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "backgroundColor": "#ffffff",
    "color": "#896D59",
    "selectedColor": "#896D59",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/images/main.png",
        "selectedIconPath": "pages/images/mian_lo1_on.png"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "分类",
        "iconPath": "pages/images/mian_lo2.png",
        "selectedIconPath": "pages/images/mian_lo2_on.png"
      },
      {
        "pagePath": "pages/car/car",
        "text": "购物车",
        "iconPath": "pages/images/mian_lo3.png",
        "selectedIconPath": "pages/images/mian_lo3_on.png"
      },
      {
        "pagePath": "pages/person/person",
        "text": "个人中心",
        "iconPath": "pages/images/mian_lo4.png",
        "selectedIconPath": "pages/images/mian_lo4_on.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

接着是app.js啊，重点来了

//app.js
App({
  onLaunch: function () {
    //隐藏系统tabbar
    wx.hideTabBar();

    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  onShow: function () {
    //隐藏系统tabbar
    wx.hideTabBar();
  },
  globalData: {
    userInfo: null
  }
})

app.js呢，重点是隐藏小程序自带的tabbar，让你自定义的组件得以显示，并且不被占位置

然后是每个界面的引用了，你想在哪个界面显示这个tabbar，就放进去以下代码
比如index首页嘛，记得看你们的层级引用模板文件哦，不然会报错的

wxml代码

wxss代码

@import "../template/template.wxss";

js代码

Page({
  data: {
	listInfo: [{
        text: '首页',
        imgUrl: '/pages/images/main.png',
        curUrl: '/pages/images/mian_lo1_on.png',
      },
      {
        text: '分类',
        imgUrl: '/pages/images/mian_lo2.png',
        curUrl: '/pages/images/mian_lo2_on.png',
      },
      {
        text: '购物车',
        imgUrl: '/pages/images/mian_lo3.png',
        curUrl: '/pages/images/mian_lo3_on.png',
      },
      {
        text: '个人中心',
        imgUrl: '/pages/images/mian_lo4.png',
        curUrl: '/pages/images/mian_lo4_on.png',
      }],
      // 底部导航
  chooseImg: function(e) {
    var that = this
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
    console.log("kk", e.currentTarget.dataset.current)
    if (e.currentTarget.dataset.current == 0) {
      wx.switchTab({
        url: '/pages/index/index',
      })
    } else if (e.currentTarget.dataset.current == 1) {
      wx.switchTab({
        url: '/pages/classify/classify',
      })
    } else if (e.currentTarget.dataset.current == 2) {
      wx.switchTab({
        url: '/pages/car/car',
      })
    } else if (e.currentTarget.dataset.current == 3) {
      wx.switchTab({
        url: '/pages/person/person',
      })
    }
    that.onShow();
  },
  onLoad: function(options) {
    var curIdx = 0
    this.setData({
      curIdx: curIdx,
    })

  },
  onShow: function() {
    this.onLoad();
  },

})

这就是所有的代码了，如果你想在别的界面引用tabbar组件，记得引入最后三步代码哦，虽然笨重了点，但是打码还是没问题的。