当前位置：首页 > news >正文

uniapp自定义导航栏搭配插槽

news 来源：原创 2025/5/10 6:34:12

在这里插入图片描述

      <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

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

<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

在这里插入图片描述

      <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>

$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;
}