一、渐变式导航条
1、 回到之前所创建的图标项目中,点击下载至本地–>打开解压包–>iconfont.ttf文件放过static 中
2、去pages.json中找到首页插入如下代码:
"app-plus": {
"titleNView": {
"type": "transparent",//开启渐变式导航条
"searchInput": { //搜索框
"backgroundColor": "rgba(230, 230, 230,.5)",
"borderRadius": "15px",
"placeholder": "请输入关键字 如:电视机",
"disabled": true,
"placeholderColor": "#606266"
},
"buttons": [
{ //左边按钮
"fontSrc": "/static/iconfont.ttf",
"text": "\ue66c",
"fontSize": "26",
"color":"#303133",
"float": "left",
"background": "rgba(0,0,0,0)" //将按钮背景改为透明
},
{ //右边按钮
"fontSrc": "/static/iconfont.ttf",
"text": "\ue61c",
"fontSize": "27",
"color":"#303133",
"background": "rgba(0,0,0,0)" //将按钮背景改为透明
}
]
}
}
注:代码中的text所对应的 附表字符码,去下载的安装包中找到iconfont.css 里面可以找到
3、展示结果如下(可以将高度设置高一点,让页面可以滚动,就能看到滚动的渐变效果了):
二、导航栏中搜索框和按钮所对应的点击事件:
//点击导航栏 buttons 时触发
onNavigationBarButtonTap(e) {
var index = e.index;
if (index === 0) {
console.log('点击了左边按钮');
} else if (index === 1) {
console.log('点击了右边按钮')
}
},
onNavigationBarSearchInputClicked() {
console.log('点击了搜索框');
}
将代码放置到***.vue (首页)的 中去,大伙可以根据自己去业务,去写对应的业务逻辑。
有不懂的可以留言,觉得好的欢迎打call~~~