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;
}
相关推荐
Nan_Shu_6144 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
卷Java8 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
卷Java8 小时前
小程序原生导航栏返回键实现
spring boot·云原生·微信小程序·uni-app
2501_9159184113 小时前
Video over HTTPS,视频流(HLSDASH)在 HTTPS 下的调试与抓包实战
网络协议·http·ios·小程序·https·uni-app·iphone
鱼樱前端15 小时前
uni-app快速入门章法(一)
前端·uni-app
Q_Q51100828516 小时前
python+springboot+uniapp基于微信小程序的任务打卡系统
spring boot·python·django·flask·uni-app·node.js·php
李慕婉学姐16 小时前
【开题答辩过程】以《基于SpringBoot+Vue+uni-app的智慧校园服务系统的设计与实现》为例,不会开题答辩的可以进来看看
spring boot·uni-app
withoutfear16 小时前
uni-app 开发H5软键盘会顶起底部内容的解决方案
uni-app·软键盘
影子信息16 小时前
uniapp 日历组件 uni-datetime-picker
前端·uni-app
不知名的前端专家16 小时前
uniapp 安卓FTP上传下载操作原生插件
android·uni-app