开始

点击顶部的搜索框要跳转到搜索页

先来创建搜索页
image.png

image.png
监听搜索框的点击事件
image.png
https://uniapp.dcloud.io/tutorial/page.html#lifecycle
image.png

image.png
onNavigationBarSearchInputClicked
image.png
写在onLoad的下面
image.png

  1. onNavigationBarSearchInputClicked() {}

image.png
点击搜索框，打开搜索页
image.png
跳转用到官方提供的路由接口
https://uniapp.dcloud.io/api/router.html#navigateto
image.png

image.png

image.png

image.png

  1. onNavigationBarSearchInputClicked() {
  2.             uni.navigateTo({
  3.                 url: '../search/search'
  4.             });
  5.         },

image.png
跳转到了搜索页
image.png
页面的设计图
image.png
我们把首页的这里复制过来，然后把左边的按钮删掉，右边的按钮换掉。换成取消的图标。
image.png
我们把index页面下面的style里面的app-plus所有的配置项都复制。
image.png

image.png
复制到我们的search页面下的style下
image.png
先删除左边的按钮
image.png
删除后这样留下右边的按钮
image.png
首先删除fontSrc
image.png
text改成取消
image.png

  1. "app-plus": {
  2.                     "scrollIndicator": "none", // 隐藏滚动条
  3.                     "bounce": "non", // 关闭反弹效果
  4.                     "titleNView": {
  5.                         "searchInput": {
  6.                             "align": "center",
  7.                             "backgroundColor": "#F7F7F7",
  8.                             "borderRadius": "4px",
  9.                             "placeholder": "搜索糗事",
  10.                             "placeholderColor": "#CCCCCC",
  11.                             "disabled": true
  12.                         },
  13.                         "buttons": [
  14.                             // 右边按钮
  15.                             {
  16.                                 "color": "#000000",
  17.                                 "colorPressed": "#BBBBBB",
  18.                                 "float": "right",
  19.                                 "fontSize": "22px",
  20.                                 "text": "取消"
  21.                             }
  22.                         ]
  23.                     }
  24.                 }

取消的字太大了。
image.png
搜索框点击后，没法输入
image.png
改字体的大小
image.png
disabled改成false
image.png
align改成left
image.png

  1. "searchInput": {
  2.                             "align": "left",
  3.                             "backgroundColor": "#F7F7F7",
  4.                             "borderRadius": "4px",
  5.                             "placeholder": "搜索糗事",
  6.                             "placeholderColor": "#CCCCCC",
  7.                             "disabled": false
  8.                         },

可以输入文字了。
image.png
返回的按钮隐藏掉，点击取消就可以返回首页。
image.png
首先来看官方的手册。默认在这里官方手册是找不到关闭返回按钮的地方的。
image.png
image.png
这里查看更多的参数
image.png
全局搜索返回按钮
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyles
image.png

image.png

image.png

  1. "autoBackButton": false,

image.png

点击取消的时候返回首页

回到search页面。
https://uniapp.dcloud.io/tutorial/page.html#lifecycle
image.png
onNavigationBarButtonTap
image.png
image.png

  1.     // 监听原生标题导航按钮点击事件
  2.         onNavigationBarButtonTap(e) {
  3.             console.log(JSON.stringify(e))
  4.         },

点击取消控制台的输出
image.png

  1. {
  2.     "color": "#000000",
  3.     "colorPressed": "#BBBBBB",
  4.     "float": "right",
  5.     "fontSize": "16px",
  6.     "text": "取消",
  7.     "fontWeight": "normal",
  8.     "index": 0
  9. }

index 0 就是我么想要的。它指的是第一个按钮。

image.png
当点击为0就返回 1步
image.png

  1. // 监听原生标题导航按钮点击事件
  2.         onNavigationBarButtonTap(e) {
  3.             if(e.index==0) {
  4.                 uni.navigateBack({
  5.                     delta: 1
  6.                 });
  7.             }
  8.         },

https://uniapp.dcloud.io/api/router.html#navigateback
image.png
我们返回一级页面。
image.png

image.png
点击取消后，返回了首页。
image.png

结束