一、渐变式导航条

1、 回到之前所创建的图标项目中,点击下载至本地–>打开解压包–>iconfont.ttf文件放过static 中
使用UniApp 编写APP(3)
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、展示结果如下(可以将高度设置高一点,让页面可以滚动,就能看到滚动的渐变效果了):
使用UniApp 编写APP(3)

二、导航栏中搜索框和按钮所对应的点击事件:

//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			var index = e.index;
			if (index === 0) {
				console.log('点击了左边按钮');
			} else if (index === 1) {
				console.log('点击了右边按钮')
			}
		},
		onNavigationBarSearchInputClicked() {
			console.log('点击了搜索框');
		}

将代码放置到***.vue (首页)的 中去,大伙可以根据自己去业务,去写对应的业务逻辑。

有不懂的可以留言,觉得好的欢迎打call~~~

分类:

技术点:

相关文章: