uniapp自定义导航栏搭配插槽

Mr.app2025-05-10 12:01

html 复制代码

      <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" left-icon="left" left-text="返回" @clickLeft="back">
        <view class="nav-bar-title">{{ navBarTitle }}</view>
        <block v-slot:right>
          <uni-icons type="search" size="24" color="#fff" @click="toSearch" />
          <uni-icons type="cart" size="24" color="#fff" @click="toCart" />
        </block>
      </uni-nav-bar>

注意点:

使用插槽需要用"block"标签包裹
具名插槽的写法:
vue2: slot="left"
vue3: v-slot:left 或者 #left

js 复制代码

// 返回上级页面
const back = () => {
  uni.navigateBack({
    delta: 1
  });
};

css 复制代码

<style lang="scss" scoped>
.pd {
  margin: 30rpx 0;
  padding: 0 30rpx;
}

.nav-bar-title {
  font-size: 36rpx;
  color: #fff;
}

::v-deep .uni-navbar__header-container {
  justify-content: center;
  align-items: center;
}

::v-deep .uni-navbar__header-btns-right {
  justify-content: space-around;
}
</style>

效果2

html 复制代码

      <uni-nav-bar left-icon="left" shadow background-color="#007AFF" @clickLeft="back">
        <view class="input-view">
          <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
          <input confirm-type="search" v-model="keyWords" maxlength="12" class="nav-bar-input" type="text" placeholder="Vue" @confirm="handelSearch(keywords)" />
        </view>
        <block v-slot:right>
          <view class="city" @click="handelSearch(keyWords)">搜索</view>
        </block>
      </uni-nav-bar>

css 复制代码

$nav-height: 60rpx;

.title-font {
  height: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #636363;
}

.input-view {
  display: flex;
  flex-direction: row;
  flex: 1;
  background-color: #f8f8f8;
  height: $nav-height;
  line-height: $nav-height;
  border-radius: 30rpx;
  padding: 0 30rpx;
  flex-wrap: nowrap;
  margin: 14rpx 0;
}

.nav-bar-input {
  height: $nav-height;
  line-height: $nav-height;
  /* #ifdef APP-PLUS-NVUE */
  width: 370rpx;
  /* #endif */
  padding: 0 5px;
  font-size: 12px;
  background-color: #f8f8f8;
}

::v-deep .uni-navbar__header-btns-left {
width: 30px !important;
}
::v-deep .uni-navbar__header-btns-right {
  justify-content: center;
}