uniapp开发APP实现导航栏顶部搜索功能

效果图如下：

在page.json中配置searchInput

{"path": "pages/index/index","style": {"navigationBarTitleText": "订单信息","app-plus": {"titleNView": {"searchInput":{"placeholder": "请输入订单关键字","borderRadius":"50rpx","backgroundColor": "#f1f1f1","align":"left"  //对齐方式}}}}
},

navigationBarTitleText配置的标题会被输入框挡住，就没有标题了。

获取搜索框中输入的值，可以使用onNavigationBarSearchInputChanged方法，和methods同级。

onNavigationBarSearchInputChanged(val) {console.log(val)  //val为搜索框输入的值
},

如果需要清空搜索框的值，可以使用setTitleNViewSearchInputText方法赋值为空。

var currentWebview = this.$scope.$getAppWebview();
currentWebview.setTitleNViewSearchInputText("");  //将当前页面的搜索框的值赋为空

注：在安卓真机上，onLoad，onShow，onPullDownRefresh，或通过setTitleNViewSearchInputText方法赋值为空时，都会调用 onNavigationBarSearchInputChanged 这个方法，所以如果请求列表数据时，要注意，不然会重复请求列表数据。但在ios真机上，onLoad，onShow，onPullDownRefresh，或通过setTitleNViewSearchInputText方法赋值为空时都不会调用 onNavigationBarSearchInputChanged 这个方法。

如果需要在顶部导航栏同时显示搜索框和标题，可使用app-plus的buttons实现标题的显示。

如下图所示：

{"path": "pages/index/index","style": {"navigationBarTitleText": "订单信息","app-plus": {"titleNView": {"searchInput":{  //搜索框"placeholder": "请输入订单关键字","borderRadius":"50rpx","backgroundColor": "#f1f1f1","align":"left"   //对齐方式},"buttons": [{"text": "订单信息","float":"left",   //控制标题显示的左右位置,"float":"left"就在搜索框右边了"fontSize":"28rpx","fontWeight":"bold","width":"auto"   //这个一定要加}]}}}
},

注：一定要加 "width":"auto" ，如果不加，在某些手机上，标题会显示不完整。

buttons中还可以显示图标

{"path": "pages/index/index","style": {"navigationBarTitleText": "订单信息","app-plus": {"titleNView": {"buttons": [{"text": "\ue000",   //图标"fontSrc": "/static/icon/iconfont.ttf","fontSize": "22px","color": "#55D88A"}]}}}
},

uniapp开发APP实现导航栏顶部搜索功能相关推荐

基于Spring boot的教学论坛系统的分页功能的实现，完善导航栏，搜索功能的实现，评论有关功能
一.实现分页功能:利用bootstrap的分页组件 IndexController.java 定义两个参数分别负责 page-页码数 size-分页数 @Controller public class ...
uni-app开发：tabar组件与顶部导航栏（功能开发篇）
uni-app开发:tabar组件与顶部导航栏(含右侧icon点击功能)[结合:案例Demo截图] 一.效果图 · 截图: 二. tabar组件 + 顶部导航栏(含右侧icon点击功能) 组件的代码调 ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
uniapp开发APP 客服链接
uniapp开发APP嵌套第三方(米多客)客服链接,遇到了无法返回的问题米多客的客服也回复很及时,发了一种解决方法详细描述问题 (记不清在哪看到一句话: 详细的描述出遇到的问题,问题就解决一大半了 ...
uni-app 开发App 口令弹窗
我们用uni-app开发APP 电商类总有口令弹窗的需求首先我们写弹窗首先就要想到uni-popup 写弹窗非常方便 <uni-popup ref="popup" roun ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
Android中导航栏之搜索框SearchView
Toolbar系列文章导航 Android中导航栏之Toolbar的使用 Android中导航栏之溢出菜单OverflowMenu Android中导航栏之搜索框SearchView Android中 ...
uniapp开发App从开发到上架全过程(三)-上架
当我们的APP开发完毕,最终交付的时候,必然要经历的一个环节,就是APP上架,国内APP上架一般为IOS端appstore上架,安卓端应用商店比较多,最常见的应用商店有华为应用商店.小米应用商店.OP ...
ios开发返回按钮消失_iOS开发之自定义导航栏返回按钮右滑返回手势失效的解决...
我相信针对每一个iOS开发者来说~除了根视图控制器外~所有的界面通过导航栏push过去的界面都是可以通过右滑来返回上一个界面~其实~在很多应用和APP中~用户已经习惯了这个功能~然而~作为开发者的我们 ...

uniapp开发APP实现导航栏顶部搜索功能

uniapp开发APP实现导航栏顶部搜索功能相关推荐

最新文章

热门文章