最终效果
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,加入购物车
加入购物车
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的点击监听
export default {
data() { return {} },
onNavigationBarButtonTap(e) {
console.log("点击了自定义按钮");
console.log(e.index);//按钮的id，根据定义的顺序0,1,2
}
}
3.ios键盘弹起页面被顶上，position为fixed失效
当页面存在input，需要输入的情况时，键盘弹起，页面被顶上position为fixed失效。
uni-app导航栏开发指南
社区关于这一块有具体的解释，可以去看看。
社区包括官网都有提到能使用原生的情况下，尽量使用原生的导航栏。