快应用底部导航栏的原生实现
什么是快应用
快应用是一种不需要安装即可使用,类似于原生APP的新型应用形态,它是由手机厂商联合推出的一款产品。它不依赖于App,而是依赖于各大手机厂商自带的快应用加载器,使用极其方便。
快应用的官方网址为:https://www.quickapp.cn/,有兴趣的同学可以去官网查看其详细的介绍以及相关的开发文档。
好了,接下来进入正题,在最开始开发快应用的时候,我发现快应用没有自带的底部导航功能,即通过配置app.json就可以自动生成底部导航栏,这令我十分头疼,毕竟有导航栏的App看起来才高大上嘛。
这两个页面,谁看起来更高大上一些呢?肯定是有导航栏的呀。
在查阅了快应用的文档之后,只有自己使用原生的组件来实现了。
要实现类底部导航栏,最关键的就是tabs和tab-bar这两个组件,另外还要知道怎样创建和引用自定义的组件,关于这tabs、tab-bar组件和自定义组件的使用请自行查看开发文档,这里就不做介绍。
下面我将一步一步地讲解如何使用它们来实现底部导航栏。
开始编写代码
1、准备工作
首先创建一个创建快应用项目:文件-新建快应用
之后在弹出的输入框内输入创建的快应用的信息
创建好后的项目的目录如下:
这里只需要看src目录下的内容。
其中src/Common下放置快应用项目的相关资源,如图片,音频等。
src下其它的文件夹每一个文件就代表了一个App的页面,其中以".ux"结尾的为页面文件,".js"结尾的为页面逻辑处理文件,".css"结尾的为页面样式文件。
这里为了方便实现导航栏,我们将初始创建的几个目录删除,之后创建成如下目录:
其中Index代表首页,My代表"我的"页面,Type代表"分类"页面。
之后去第三方图库下载几张适合做底部导航icon的图片到项目的Common文件夹下。
下载好后如图:
可以看到每一张图片都有一个对应的selected的图片,用于作为当前导航栏显示。注意这里的logo.png为项目自动生成的图片,用做App的logo,可在mianfest.josn文件下配置修改App的logo:
配置路由!配置路由!配置路由!
重要的事情说3遍,在一切准备好之后必须去mainfest.json文件内配置路由,将原来"router"内的内容修改为如下:
这里解释一下"router"内配置的含义:
(1)entry:主界面,就是打开快应用后看到的第一个页面,注意这里用的"Tabbar"而不是"tabbar",即使用的是放置页面文件的文件夹名,而不是页面文件的文件名。
(2)pages:配置快应用所有的页面,如果不在这里配置打开快应用之后是不能正常跳转到正确的页面。
(3)Tabbar:填页面文件所在文件夹的名称
(4)component:页面文件夹内页面文件的文件名,当一个页面文件夹内有多个页面文件时,App只能访问到这里配置了的页面。
2、开始写代码
话不多说,直接上代码。
以下是核心代码,用于生成底部的导航栏
(1)Tabbar/tabbar.ux
<!--引入自定义的模版-->
<!--引入首页-->
<import name='index' src="../Index/index.ux"></import>
<!--引入“分类”页面-->
<import name='type' src="../Type/type.ux"></import>
<!--引入“我的”页面-->
<import name='my' src="../My/my.ux"></import>
<template> <!--注意:template里只能有一个根节点 --> <div class="container"> <!--根据不同的flag显示不同的页面--> <block if="{{flag==0}}"> <!--显示"首页"--> <index></index> </block> <block elif="{{flag==1}}"> <!--显示"分类"页面--> <type></type> </block> <block elif="{{flag==2}}"> <!--显示"我的"页面--> <my></my> </block> <!--底部导航栏--> <tabs> <tab-bar class="footer-container"> <!--遍历tabBar.list,生成导航栏--> <block for='tabBar.list'> <div class="footer-item" onclick="setIndex($idx)"> <!--$idx为tabBar.list当前的索引值,以0开始--> <!--如果当前页面被选中--> <block if='{{$idx==flag}}'> <!--icon--> <image src="{{tabBar.list[$idx].selected_icon}}" class="footer-item-img"></image> <!--页面标签值--> <text class="tab-text" style="color: {{tabBar.list[$idx].selected_color}}">{{tabBar.list[$idx].name}}</text> </block> <!--当前页面未被选中--> <block else> <image src="{{tabBar.list[$idx].icon}}" class="footer-item-img"></image> <text class="tab-text" style="color: {{tabBar.list[$idx].color}}">{{tabBar.list[$idx].name}}</text> </block> </div> </block> </tab-bar> </tabs> </div>
</template>
<style src="./tabbar.css"></style>
<script> module.exports = { data: { flag: 0,//默认为 0 首页,1 分类,2 我的 tabBar: { list: [{ name: '首页',//当前页面标签值 icon: '../Common/home.png',//未选中icon地址 color: '#666666',//未选中时文本颜色 selected_color: '#1296db',//选中时文本颜色 selected_icon: '../Common/home_selected.png'//选中是icon地址 }, { name: '分类', icon: '../Common/type.png', color: '#666666', selected_color: '#1296db', selected_icon: '../Common/type_selected.png' }, { name: '我的', icon: '../Common/my.png', color: '#666666', selected_color: '#1296db', selected_icon: '../Common/my_selected.png' }] } }, //初始化,进入界面加载的事件 onInit() { //设置页面title this.$page.setTitleBar({ text: this.tabBar.list[this.flag].name}) }, //修改flag实现点击导航栏显示不同的页面,pos为传入的参数 setIndex: function (pos) { //设置flag,flag改变后显示的页面也会对应的改变 this.flag = pos //设置页面标题 this.$page.setTitleBar({ text: this.tabBar.list[pos].name }) } }
</script>
导航栏的样式
(2)Tabbar/tabbar.css
.container { flex-direction: column; justify-content: center; align-content: center; align-items: center; height: 500px;
} .footer-container { width: 100%; height: 65px; position: fixed; bottom: 0; margin-bottom: 0; background-color: #FFFFFF; border-top-width: 1px; border-top-color: #CCCCCC; z-index: 999;
} .footer-item { width: 25%; display: flex; flex-direction: column;
} .footer-item-img { margin-left: 32px; width: 30px; height: 30px;
} .tab-text { text-align: center; font-size: 12px;
}
以下是各页面的内容,需在/Tabbar/tabbar.ux中引入
(1)Index/index.ux
<template> <div> <text>首页</text> </div>
</template>
(2)Type/type.ux
<template> <div> <text>分类</text> </div>
</template>
(3)My/my.ux
<template> <div> <text>我的</text> </div>
</template>
一切都做好之后本以为可以正常运行,可是快应用运行之后的界面却是这样的:
界面全都乱了。。。。。
肯定是css出了问题,于是乎我便查阅资料,最后发现快应用的mainfest.json配置文件里有一个“config.designWidth”的选项,其说明如:
原来快应用可以设置页面的基准宽度,将基准宽度设置为375之后就正常啦!!!
最终的效果:
如果需要添加或删除页面,只需要修改Tabbar/tabbar.ux内tabBar.list的内容就可以啦^_^
不过一定要记得修改后必须要在Tabbar/tabbar.ux内引入相应的页面,并且在显示页面时做判断哦,如Tabbar/tabbar.ux内的:
<!--根据不同的flag显示不同的页面--> <block if="{{flag==0}}"> <!--显示"首页"--> <index></index> </block> <block elif="{{flag==1}}"> <!--显示"分类"页面--> <type></type> </block> <block elif="{{flag==2}}"> <!--显示"我的"页面--> <my></my> </block>
最后,我将我的代码上传到github上了,有兴趣的同学可以git clone学习一下:https://github.com/RickyHal/quickApp_tabbar.git
相关阅读:
网页与快应用之间构造可靠通信通道
一个前端攻城狮的快应用开发之路
快应用的用法和常见问题解答
快应用开发漫谈-部署与调试
快应用开发新手入门指南
快应用list组件的那些事儿
写在最后
在去年的开发者大赛征文中,我们通过多个社区联合活动收集了很多优质文章,有入坑指南、开源项目、开发模板、常见问题总结等多个方面,这些内容为很多开发者提供了参考,感谢大家的支持和参与,今年的我们的征文活动还在继续,感兴趣的开发者可以点阅读原文查看详情哦!
快应用生态平台
赋能开发者
拓展场景未来
快来关注我们吧
快应用底部导航栏的原生实现相关推荐
- react native 的底部导航栏以及跳转页面带参数
不知不觉又过去了一周,这周依旧是用RN来开发APP,中间遇到很多坑,不过这段时间还是忙,慢慢总结吧,写出一点是一点.写博客除了分享,在开始写之前也是自己对于这段时间学习的总结,重新看代码,理顺思路,这 ...
- android fragment 底部菜单栏,一句话搞定Android底部导航栏,一键绑定Fragment、ViewPager...
现在大多数App都会用到底部导航栏,比如常见的聊天工具QQ.微信.购物App等等,有了底部导航栏,用户可以随时切换界面,查看不同的内容.它的实现方式也很多,以前大多使用TabHost来实现,但是现在我 ...
- 转载:Android (争取做到)最全的底部导航栏实现方法
原文出处 标题:Android (争取做到)最全的底部导航栏实现方法 作者:野狼谷 原文链接:Android (争取做到)最全的底部导航栏实现方法 - 野狼谷 - 博客园 前言 本文(争取做到)And ...
- php点击切换图片的底部导航,如何优雅地使用BottomNavigationView实现底部导航栏+fragment切换效果...
BottomNavigationView.jpeg 引言 之前总是使用RadioButton+ViewPager来实现底部导航栏+fragment切换效果,总是繁琐地还需要写ViewPager的适配器 ...
- mui实现底部导航栏页面切换
1 问题描述 mui是一款最接近原生的框架,对于会使用的人来说十分的便捷易操作,但对于像笔者这样刚入门的小白可是十分的陌生和走了太多的弯路. 对于那些不懂的前端的人,或者是一些刚入门html的人,他们 ...
- android底部导航栏中间凸起,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标...
仿闲鱼底部导航栏带有中间凸起图标 刚接触Flutter,需要实现一个类似闲鱼APP的底部导航栏的实现 要实现的效果如图: 好的,下面开始上代码了: 一. 在main.dart文件中,定义APP的入口信 ...
- 微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能 解决方案 uni-app 微信原生代码 在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮( ̄﹏ ̄)╭⭐. 解决方案 在导航 ...
- 底部导航栏的凸起效果
微信小程序开发教程.开发教学 本视频为1-1号视频,做出了底部导航栏的凸起效果 第一次做视频,希望大家多多支持- 组件源码+项目源码: 链接:https://pan.baidu.com/s/1EkZx ...
- 闲鱼底部tab android,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
image 霸图镇楼 仿闲鱼底部导航栏带有中间凸起图标 需求情景: 需要实现一个类似闲鱼APP的底部导航栏的实现 要实现的效果如图 image 好的,下面开始上代码了: 一. 在main.dart文件 ...
最新文章
- 亿级流量电商详情页系统实战:缓存架构+高可用服务架构+微服务架构
- openssl https 单向认证连接成功示例
- 3.12课·········数组
- Tasker 正则表达式测试器
- 软件设计师 - 计算机组成体系结构 -
- 大数高精加减乘除(洛谷P1601、P2142、P1303、P1480题题解,Java语言描述)
- Windows Server 2008 R2 免费使用900天的方法
- python for spss statistics_IBM SPSS Statistics 与用户自定义 Python 模块的集成及分析
- EMD/EEMD 经验模态分解/集合经验模态分解
- 有哪些比较基础的优质计算机书籍?
- java lambda排序
- UMLChina公众号文章精选(20220619更新精选)
- 三人行,必有我师焉。择其善者而从之,其不善者而改之。
- Alien Skin Exposure X5 Bundle Mac(PS/LR照片胶片滤镜插件)
- 怎么访问云服务器上的图片
- 快速部署OpenStack的操作笔记(珍藏版)
- Cond:条件变量源码解读
- 质量管理的五大问题和对策|优思学院
- 自己做h5页面点击元素块的时候会出现黑色阴影
- Android游戏: 连连看