uniapp顶部按钮和搜索框
先看效果图
效果是怎样实现的呢?(这个只支持APP和一些H5页面)
uniapp的官方文档文档地址,在文档中搜索app-plus,就可以找到对应的属性。
实现步骤
- 在page.json中找到对应的页面。
- 在对应页面的style中添加如下代码
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [
{
"text": "···",
"fontSize":"16",
"float": "right",
"color":"#101010"
},
{
"text": "城市",
"fontSrc":"",
"fontSize":"16",
"float": "left",
"color":"#101010"
}
],
"searchInput":{
"align": "center",
"placeholder": "请输入查找专家信息",
"border": "2upx solid #EC5D29"
}
}
}
顶部按钮以及搜索框的监听事件
这个uniapp官方也是给的有文档的,安排的明明白白的。文档地址
这个方法和data,onload同级(优先级都是在同一级)。列如:
动态设置顶部导航的内容
这些东西uniapp官方的文档基本都是有的文档地址。
这个就不是跟onload,data这些方法平级了。一般都是在onReady内执行,以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间。(建议在onReady内执行)。
uni.setNavigationBarTitle({
title:"页面标题内容"
})
uni.setNavigationBarColor({ //16进制
frontColor: '字体颜色',
backgroundColor: '背景颜色',
})