小程序使用自己写的footer 底部 而不使用原生的footer的原因

小程序使用自己写的footer 底部 而不使用原生的footer的原因是由于 原生的footer不灵活，

一个路由对应一个footer的icon 底部的图标和文字，而如果是某些page不需要展示下面的icon 则必须滞空，这样样式也依然会占位，导致展示不好看，

而自己写的footer作为组件的好处就是不跟随page的设计而设置 有再多的page 也不用担心，我想配置我就关联这个icon的变量 不想配置我就不用关联展示的变量 来切换一个page中不同的部分 ，也就是说把page当作组件来处理了 而不单单是page 路由的一部分

 

<template>
  <view class="test_library_footer">
    <view class="test_library">
      <view class="test_library_tap" @tap="toTestOther(1)">
        <image wx:if="{{imageUrl}}" src="{{imageUrl+startUrl + randomNum}}" class="icon"></image>
        <text class="{{active === '1' ? 'tip_active' : 'tip'}}">技术头条</text>
      </view>
    </view>

    <view class="test_library">
      <view class="test_library_tap" @tap="toMine(2)">
        <image wx:if="{{imageUrl}}" src="{{imageUrl + mineUrl + randomNum}}" class="icon"></image>
        <text class="{{active === '2' ? 'tip_active' : 'tip'}}">我的主页</text>
      </view>
    </view>
  </view>
</template>
<script>
  // import api from '@/api'
  import wepy from 'wepy'
  import api from '@/api'
  export default class Panel extends wepy.component {
    props = {
      startUrl: String,
      mineUrl: String,
      active: String
    }
    computed = {
      imageUrl() {
        return this.$root.$parent.globalData.imageUrl
      },
      randomNum() {
        return '?' + parseInt(new Date().getTime() / 1000) + ''
      }
    }
    data = {
    }
    toGodActivity() {
      this.$emit('to_god_activity')
    }
    methods = {
      toTestOther(index) {
        this.active = index
        this.startUrl = '/book_red.png'
        this.mineUrl = '/block_mine.png'
        this.$emit('to_test_other')
      },
      toMine(index) {
        this.active = index
        this.startUrl = '/book_grey.png'
        this.mineUrl = '/red_mine.png'
        this.$emit('to_test_mine')
      },
      toMiniProgram() {
        this.$emit('to_other_miniprogram')
        this.$parent.$wxapp.aldstat.sendEvent('首页圈子icon', '点击圈子icon跳转自考版小程序')
      },
      pushMsg(e) {
        if (e.detail.formId) {
          this.userPushMessage(e.detail.formId)
        }
        // const param = e.detail.target.id
        this.toActiveList()
      }
    }
    toActiveList() {
      this.$emit('to_active_list')
      this.$parent.$wxapp.aldstat.sendEvent('首页活动icon', '点击首页活动icon')
    }
    async userPushMessage(id) {
      const isPushMessage = await api.pushMessage({
        method: 'POST',
        data: {
          messageType: 'TEMP_FORM_ID',
          formId: id
        }
      })
      if (!isPushMessage) return
      this.$apply()
    }
  }
</script>
<style lang="less">
  button::after{ border: none;}
  button {
    background-color: #fff;
  }
  .test_library_footer{
    z-index: 99sss;
   //  height: 104rpx;
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    border-top: 1px solid #e8e8e8;
    height:102rpx;
    .test_library{
      width: 50%;
      height: 100%;
      position: relative;
      .test_library_tap{
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: auto;
        position: relative;

        .tip {
          color: #b6b6b6;
          font-size:22rpx;
          height:30rpx;
          /*margin-top:10rpx;*/
          line-height:54rpx;
        }
        .icon{
          width:40rpx;
          height:40rpx;
          display:block;
          // margin-bottom:4rpx;
        }
        .tip_active{
          color: #b53746;
          font-size:22rpx;
          height:30rpx;
          /*margin-top:10rpx;*/
          line-height:54rpx;
        }

      }
    }
  }
</style>