uniapp自定义导航栏搭配插槽

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>

注意点:

  1. 使用插槽需要用"block"标签包裹
  2. 具名插槽的写法:
    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;
}
相关推荐
00后程序员张4 分钟前
iOS 26 App 运行状况全面解析 多工具协同监控与调试实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_916007471 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆、加固与发布治理(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
2501_915918411 小时前
怎么上架 App?iOS 应用上架完整流程详解与跨平台发布实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 小时前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
SY_FC2 小时前
uniapp textarea标签 在ios真机上出现高度拉长问题
uni-app
游戏开发爱好者811 小时前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
shykevin19 小时前
uni-app x导航区域跳转
windows·uni-app
2501_9151063220 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者820 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 天前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone