uniapp渐变式导航条按钮出发事件

一、渐变式导航条

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~~~

uniapp渐变式导航条按钮出发事件相关推荐

css3实现的一些灰色的导航条按钮
以前做网页时候一般一些渐变的导航条和菜单效果都是用背景图片来实现想要的效果,今天用css3实现了一些灰色的漂亮的导航按钮效果,主要分为两种, 源代码下载地址:http://download.csdn. ...
Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
Photoshop轻松制作Apple网站导航条按钮
P>Photoshop教程,利用Photoshop模拟制作Apple.Com苹果网站的网站导航条按钮.最终大家可以去http://www.apple.com网站对比下效果. 1.新建立一个5 ...
bootstrap-响应式导航条
1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
UIBarButtonItem导航条按钮封装
系统导航条应该再iOS开发项目中都会有用到.但是有时间长篇大论的在C里边写一大串代码,未必会有些繁杂.基于封装角度,今天我们来做一个导航条UIBarButtonItem的进一步封装,让代码更简洁今天 ...
uni-app动态修改导航条的标题
由于这个微信小程序表单页面是用于创建和编辑的,所以导航条的标题不能是一样的,但是在路由配置里面只能设置一个.所以需要在页面中进行修改,在这里用到了uni-app给我们的uni.setNavigatio ...
uni-app 设置页面导航条颜色
下述两种方法中颜色限制为十六进制颜色. 1.pages.json页面路由中,用style设置每一个页面的导航栏背景颜色如: { "pages": [{ " ...
html5响应式导航条,10个响应式设计的导航菜单源码-附教程
10个响应式设计的导航菜单源码-附教程 Sponsor 在2013年里,响应式Web设计将会开始普及,我们应该学习这些新技术,尤其作为网页设计师和前端开发人员,学习CSS3样式表和HTML5是必不可少 ...
uniapp导航栏自定义图标按钮/搜索|uni-app自定导航条
uni-app自定义导航栏|仿微信顶部导航uni_headerBar,支持标题居左.居中.搜索条,按钮可传入文字/字体图标/图片 uniApp原生导航栏 uni-app原生导航栏也能实现一些顶部自定义 ...

uniapp渐变式导航条按钮出发事件

一、渐变式导航条

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

uniapp渐变式导航条按钮出发事件相关推荐

最新文章

热门文章