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

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

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

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

先来wxml代码吧

<view class='footer'>

  <view class='footer_list' data-current="{
  {0}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{
  {curIdx===0}}' src="{
  {listInfo[0].imgUrl}}"></image>
    <view hidden='{
  {curIdx!==0}}' class="tab-img">
      <image class="footer-image2" src="{
  {listInfo[0].curUrl}}"></image>
    </view>
    <!-- 等于该id的话图标和名称就凸起来 -->
    <view class="footer-text">首页</view>
    <view hidden='{
  {curIdx!==0}}' class="footer-text2">首页</view>
  </view>

  <view class='footer_list' data-current="{
  {1}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{
  {curIdx===1}}' src="{
  {listInfo[1].imgUrl}}"></image>
    <view hidden='{
  {curIdx!==1}}' class="tab-img">
      <image class="footer-image2" src="{
  {listInfo[1].curUrl}}"></image>
    </view>
    <view class="footer-text">分类</view>
    <view hidden='{
  {curIdx!==1}}' class="footer-text2">分类</view>
  </view>

  <view class='footer_list' data-current="{
  {2}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{
  {curIdx===2}}' src="{
  {listInfo[2].img