开始

从右上角的笔的图标进去。

image.png
添加页面add-input
image.png

image.png

image.png
复制搜索页监听原生标题导航按钮点击事件
image.png
复制到首页
image.png
根据e.index来判断
image.png
点击这只比输出1
image.png
点击签到的标签输出0
image.png
navigateTo下面三个选项不用，直接删除
image.png

image.png

  1. // 监听原生标题导航按钮点击事件
  2.         onNavigationBarButtonTap(e) {
  3.             switch(e.index){
  4.                 case 1:
  5.                 uni.navigateTo({
  6.                     url:'../add-input/add-input'
  7.                 })
  8.                 break;
  9.             }
  10.         },

点击笔 跳转到了发布页面。

image.png
配置发布页面

image.png

image.png
中间是一个下拉的选项，选择所有人可见，还是紧紧是自己可见。
image.png
基于app的配置
image.png
https://uniapp.dcloud.net.cn/collocation/pages.html#style
image.png

image.png
禁止原生导航
image.png

  1. "app-plus": {
  2.   // 禁止原生导航
  3.     "titleNView": false
  4. }

文字直接顶到上面去了。
image.png
官方提供的扩展UI。就是官方的hello-uni-app那个
image.png
image.png

image.png
搜索官方demo的页面
image.png

扩展组件所欲的ui都在这个文件件下
image.png
这里引入了两个组件。
image.png

image.png

2022年 新建的hello-uni-app 搜索一uni-nav-bar是在uni_modules里面的。
image.png

image.png

首先复制这个组件。复制到我们项目components文件夹下
image.png
复制这个
image.png
复制这个
image.png
status-bar是状态栏的占位符，这样文字就不会直接顶到最上面了。
image.png

2002年导入uni-ui组件的方法

视频中的导入方法已经不适用于当前最新版本HBuilderX的方式了。
https://www.yuque.com/meirenchangduancuiyanlou/pawgo4/mcyxse#eE4U6

使用组件

有3种用法
image.png
直接复制基本用法，因为我们要用到那个返回按键
我们直接复制这个基本用法
image.png

image.png
引入组件，注册组件
image.png
重启组件
image.png
导航栏有，但是还是被顶到了上面。
image.png
我们还需要配置参数

image.png
占位符。
image.png
这里我们直接设置:statusBar为true即可。

image.png

image.png

配置右边的文字

image.png

image.png

image.png

  1. <uni-nav-bar :statusBar="true" rightText="发布" left-icon="back" left-text="返回" right-text="菜单" title="标题">
  3.         </uni-nav-bar>

image.png
返回按钮事件
先把title删掉。
image.png
我们来分析中间部分。中间有个slot插槽。
image.png

image.png

image.png
类型是font class
image.png

image.png
图标没有看到，被挤压到下面 了。
image.png
给他设置一个flex布局，再居中一下。
这是我们封装的css样式、
image.png
直接给个水平居中就可以了。
image.png

image.png

image.png

左边按钮的监听事件
image.png
组件内的左右键的事件。
image.png
image.png

  1. <uni-nav-bar :statusBar="true" rightText="发布" 
  2.         left-icon="back" left-text="返回" right-text="菜单"
  3.         @clickLeft="back" @clickRight="submit">
  4.             <view class="u-f-ajc" @tap="changelook">
  5.                 所有人可见
  6.                 <view class="icon iconfont icon-xialazhankai"></view>
  7.             </view>
  8.         </uni-nav-bar>

中间的事件
image.png
3个事件
image.png

  1. methods: {
  2.             // 返回
  3.             back(){
  5.             },
  6.             // 发布
  7.             submit(){
  9.             },
  10.             // 隐私
  11.             changelook(){
  13.             }
  14.         }

返回一级
image.png
image.png

image.png

隐私事件，加接口

官方提供的一个接口

https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
image.png

image.png

image.png

image.png

  1. // 隐私
  2.             changelook(){
  3.                 console.log('隐私')
  4.                 uni.showActionSheet({
  5.                     itemList: ['所有人可见', '仅自己可见'],
  6.                     success: function (res) {
  7.                         console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
  8.                     },
  9.                     fail: function (res) {
  10.                         console.log(res.errMsg);
  11.                     }
  12.                 });
  13.             }

image.png

image.png
数据换成动态的
image.png

  1. {{yinsi}}

image.png

  1. data() {
  2.             return {
  3.                 yinsi: "所有人可见"
  4.             }
  5.         },

数组拿出来
image.png

  1. let changelook = ['所有人可见', '仅自己可见'];

image.png

image.png

输出点击按钮的索引
image.png44
image.png
输出0
image.png
点击第二个
image.png
选中哪一个直接从数组里面取
image.png

  1. // 隐私
  2.             changelook(){
  3.                 console.log('隐私')
  4.                 uni.showActionSheet({
  5.                     itemList: changelook,
  6.                     success: function (res) {
  7.                         console.log(res.tapIndex);
  8.                         console.log(changelook[res.tapIndex]);
  9.                         this.yinsi=changelook[res.tapIndex];
  10.                     }
  11.                 });
  12.             }

出现的问题

参考组价的用法
https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html#%E7%A4%BA%E4%BE%8B

中间的所有人可见在H5下没法居中显示在标题中间

手机端可以单独设置属性去解决，这个方法设置了在H5下不起作用

  1. <style>
  2. .uni-navbar__header-container {
  3.     justify-content: center;
  4. }
  5. </style>

H5下给中间这块的内容个添加class属性为u-f-ajc也可以，但是没有办法直接找到他的父节点的class属性
image.png

image.png
问题2：选择了具体的内容后， 标题栏内容不会发生改变
image.png

组件的路径

D:\demos\uni-app\hello-uni-app2022\uni_modules\uni-nav-bar

结束