uni-app|uni-app 原生导航栏、更换顶部导航栏icon、ios键盘弹起页面被顶上 uni-app原生导航栏、更换顶部导

文章图片
最终效果 【uni-app|uni-app 原生导航栏、更换顶部导航栏icon、ios键盘弹起页面被顶上】Unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

2020-05-21（祝各位分手快乐哈） iconFont更新后的使用更新

依然是选择需要的icon下载素材，解压包
拷贝项目下面生成的 @font-face

@font-face { font-family: 'iconfont'; src: url('@/static/iconfont.eot'); src: url('@/static/iconfont.eot?#iefix') format('embedded-opentype'), url('@/static/iconfont.woff2') format('woff2'), url('@/static/iconfont.woff') format('woff'), url('@/static/iconfont.ttf') format('truetype'), url('@/static/iconfont.svg#iconfont') format('svg'); }

将@font-face相关的url放到static文件夹下
与旧版本相比较，引入文件增加，@font-face修改一下

1.原生导航栏 pages.json文件

{ "path" : "pages/create/pick-sku", "style" : { "navigationBarTitleText": "選擇商品",//导航栏标题 "navigationBarBackgroundColor": "#EA8C1B",//导航栏背景颜色 "backgroundColorTop":"#EA8C1B",//顶部窗口的背景色(IOS) "app-plus": { "titleNView":{ "type": "transparent", "titleColor": "#fff", "backgroundColor": "#007AFF", "buttons": [{//title icon "fontSrc": "/static/uni.ttf", "text": "\ue537", "width": "40px", "fontSize": "28px", "color": "#fff", "background": "rgba(0,0,0,0)" }] } } } } //关于每个属性的解释查看官网

2.更换顶部导航栏icon 这里的icon只能使用FontIcon(字体图标),可以查看阿里巴巴矢量图标库，这个icon库的icon可以拿来用
如何将icon拿来用，下面是具体的步骤：
1.打开阿里巴巴矢量图标库的网址
2.选择需要的矢量图icon,加入购物车

uni-app|uni-app 原生导航栏、更换顶部导航栏icon、ios键盘弹起页面被顶上

文章图片
加入购物车
3.选择购物车，打开购物车，点击下载代码

文章图片
购物车图标最右侧

文章图片
下载代码
4.解压下载包，找到iconfont.ttf和iconfont.css,两份文件
5.在自己的项目中打开，可以放到static目录下
6.在iconfont.css中，找到需要运用的Unicode

文章图片
\exxxx
\e60f 我们需要运用的unicode

文章图片

\e60f 要修改为 \ue60f 修改pages.json中需要修改的page

{ "path" : "pages/create/pick-sku", "style" : { "navigationBarTitleText": "選擇商品", "navigationBarBackgroundColor": "#EA8C1B",//导航栏背景颜色 "backgroundColor": "#EA8C1B", "backgroundColorTop":"#EA8C1B",//顶部窗口的背景色(IOS) "app-plus": { "titleNView":{ "autoBackButton":"false",//去掉原生自带的back icon "buttons": [{//自己的back icon "fontSrc": "/static/iconfont.ttf", "text": "\ue612", "width": "auto", "fontSize": "32upx", "color": "#FFFFFF", "background": "rgba(0,0,0,0)", "float":"left" },{//右边的icon，最多3个 "fontSrc": "/static/iconfont.ttf", "text": "\ue610", "width": "auto", "fontSize": "32upx", "color": "rgba(225,225,225,.4)", "background": "rgba(0,0,0,0)" }] } } } }, //导航栏部分的icon最多四个，包括left的返回按钮 //把对应图标的编码填写到page.json的配置项里text，必须写成一个"\u***"，然后重启

7.对于icon的点击监听