自定义navigateBack | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 14 天

原本还不知道今天笔记内容要写什么好，点开了一下项目，扫了一眼components文件夹，发现有一个组件——自定义顶部导航栏，这又是一个开发中为了兼容多个页面使用的组件，所以来记录一下

普通的、常规的、原生的长这个样子

我写出来的组件长这样 也可以长这样

实现过程 先去pages.json对应页面把navigationStyle改为自定义 然后新建vue文件（手动doge）

很明显上边两种效果，左侧的返回是不一样的，说明标签就已经是不一样了，而中间部分，就是简单的文本，居中效果，就可以用一个插槽实现

先利用uni.getMenuButtonBoundingClientRect()获取原生的胶囊（右上角的圆角矩形）的位置宽高等信息，单位都是px

然后我们用fixed定位把最外层容器定到这样

接下来就可以在这区域内绘制我们的东西

这两个就是一个实现纯返回箭头，一个多一个编辑功能（图标一换，功能就能换，通过emit想父组件/页面传递事件就行）

    <image
      class="image"
      :src="icon.back[backType]"
      mode=""
      v-if="!hasAnotherFun"
      @click="goBack"
    />
    <view v-else class="hasAnotherFun">
      <view>
        <image :src="icon.back[backType]" mode="" @click="goBack" class="fun" />
      </view>
      <view class="divide"></view>
      <view>
        <image
          class="fun"
          :src="isEditing ? icon.over : icon.edit"
          mode=""
          style="transform: scale(0.58);}"
          @click="anotherFun"
        />
      </view>
    </view>

然后就放一个插槽就行

调用的时候就这样

    <custom-navigation
      :backType="1"
      :hasAnotherFun="true"
      @anotherFun="changeEditing"
    >
      <view style="text-align: center; line-height: 32px">嘿嘿嘿</view>