请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 快应用底部导航栏的原生实现

1
回复
146
查看
[复制链接]

10

主题

17

帖子

1358

积分

 楼主| 2019-8-23 16:37:40 显示全部楼层 |阅读模式

什么是快应用

快应用是一种不需要安装即可使用,类似于原生APP的新型应用形态,它是由手机厂商联合推出的一款产品。它不依赖于App,而是依赖于各大手机厂商自带的快应用加载器,使用极其方便。

快应用的官方网址为:https://www.quickapp.cn/,有兴趣的同学可以去官网查看其详细的介绍以及相关的开发文档。

好了,接下来进入正题,在最开始开发快应用的时候,我发现快应用没有自带的底部导航功能,即通过配置app.json就可以自动生成底部导航栏,这令我十分头疼,毕竟有导航栏的App看起来才高大上嘛。
                                                             未命名_meitu_1.jpg


这两个页面,谁看起来更高大上一些呢?肯定是有导航栏的呀。

在查阅了快应用的文档之后,只有自己使用原生的组件来实现了。

要实现类底部导航栏,最关键的就是tabs和tab-bar这两个组件,另外还要知道怎样创建和引用自定义的组件,关于这tabs、tab-bar组件和自定义组件的使用请自行查看开发文档,这里就不做介绍。

下面我将一步一步地讲解如何使用它们来实现底部导航栏。

开始编写代码

1、准备工作

首先创建一个创建快应用项目:文件-新建快应用

创建快应用.jpg

之后在弹出的输入框内输入创建的快应用的信息

20190111172927598.jpg
创建好后的项目的目录如下:
20190111173135101.jpg

这里只需要看src目录下的内容。

其中src/Common下放置快应用项目的相关资源,如图片,音频等。

src下其它的文件夹每一个文件就代表了一个App的页面,其中以".ux"结尾的为页面文件,".js"结尾的为页面逻辑处理文件,".css"结尾的为页面样式文件。

这里为了方便实现导航栏,我们将初始创建的几个目录删除,之后创建成如下目录:

20190111174249485.jpg

其中Index代表首页,My代表"我的"页面,Type代表"分类"页面。

之后去第三方图库下载几张适合做底部导航icon的图片到项目的Common文件夹下。

下载好后如图:

20190111172659300.jpg

可以看到每一张图片都有一个对应的selected的图片,用于作为当前导航栏显示。注意这里的logo.png为项目自动生成的图片,用做App的logo,可在mianfest.josn文件下配置修改App的logo:

20190111174627152.jpg

配置路由!配置路由!配置路由!

重要的事情说3遍,在一切准备好之后必须去mainfest.json文件内配置路由,将原来"router"内的内容修改为如下:

1.jpg

这里解释一下"router"内配置的含义:

   (1)entry:主界面,就是打开快应用后看到的第一个页面,注意这里用的"Tabbar"而不是"tabbar",即使用的是放置页面文件的文件夹名,而不是页面文件的文件名。

   (2)pages:配置快应用所有的页面,如果不在这里配置打开快应用之后是不能正常跳转到正确的页面。

   (3)Tabbar:填页面文件所在文件夹的名称

   (4)component:页面文件夹内页面文件的文件名,当一个页面文件夹内有多个页面文件时,App只能访问到这里配置了的页面。

2、开始写代码

话不多说,直接上代码。

以下是核心代码,用于生成底部的导航栏

(1)Tabbar/tabbar.ux

  1. <!--引入自定义的模版-->        
  2. <!--引入首页-->        
  3. <import name='index' src="../Index/index.ux"></import>        
  4. <!--引入“分类”页面-->        
  5. <import name='type' src="../Type/type.ux"></import>        
  6. <!--引入“我的”页面-->        
  7. <import name='my' src="../My/my.ux"></import>        
  8. <template>        
  9.     <!--注意:template里只能有一个根节点 -->        
  10.     <div class="container">        
  11.         <!--根据不同的flag显示不同的页面-->        
  12.         <block if="{{flag==0}}">        
  13.             <!--显示"首页"-->        
  14.             <index></index>        
  15.         </block>        
  16.         <block elif="{{flag==1}}">        
  17.             <!--显示"分类"页面-->        
  18.             <type></type>        
  19.         </block>        
  20.         <block elif="{{flag==2}}">        
  21.             <!--显示"我的"页面-->        
  22.             <my></my>        
  23.         </block>        
  24.          
  25.         <!--底部导航栏-->        
  26.         <tabs>        
  27.             <tab-bar class="footer-container">        
  28.                 <!--遍历tabBar.list,生成导航栏-->        
  29.                 <block for='tabBar.list'>        
  30.                     <div class="footer-item" onclick="setIndex($idx)">        
  31.                         <!--$idx为tabBar.list当前的索引值,以0开始-->        
  32.                         <!--如果当前页面被选中-->        
  33.                         <block if='{{$idx==flag}}'>        
  34.                             <!--icon-->        
  35.                             <image src="{{tabBar.list[$idx].selected_icon}}" class="footer-item-img"></image>        
  36.                             <!--页面标签值-->        
  37.                             <text class="tab-text" style="color: {{tabBar.list[$idx].selected_color}}">{{tabBar.list[$idx].name}}</text>        
  38.                         </block>        
  39.                         <!--当前页面未被选中-->        
  40.                         <block else>        
  41.                             <image src="{{tabBar.list[$idx].icon}}" class="footer-item-img"></image>        
  42.                             <text class="tab-text" style="color: {{tabBar.list[$idx].color}}">{{tabBar.list[$idx].name}}</text>        
  43.                         </block>        
  44.                     </div>        
  45.                 </block>        
  46.             </tab-bar>        
  47.         </tabs>        
  48.     </div>        
  49. </template>        
  50. <style src="./tabbar.css"></style>        
  51. <script>        
  52.     module.exports = {        
  53.         data: {        
  54.             flag: 0,//默认为 0 首页,1 分类,2 我的        
  55.             tabBar: {        
  56.                 list: [{        
  57.                     name: '首页',//当前页面标签值        
  58.                     icon: '../Common/home.png',//未选中icon地址        
  59.                     color: '#666666',//未选中时文本颜色        
  60.                     selected_color: '#1296db',//选中时文本颜色        
  61.                     selected_icon: '../Common/home_selected.png'//选中是icon地址        
  62.                 }, {        
  63.                     name: '分类',        
  64.                     icon: '../Common/type.png',        
  65.                     color: '#666666',        
  66.                     selected_color: '#1296db',        
  67.                     selected_icon: '../Common/type_selected.png'        
  68.                 }, {        
  69.                     name: '我的',        
  70.                     icon: '../Common/my.png',        
  71.                     color: '#666666',        
  72.                     selected_color: '#1296db',        
  73.                     selected_icon: '../Common/my_selected.png'        
  74.                 }]        
  75.             }        
  76.         },        
  77.         //初始化,进入界面加载的事件        
  78.         onInit() {        
  79.             //设置页面title        
  80.             this.$page.setTitleBar({ text:  this.tabBar.list[this.flag].name})        
  81.         },        
  82.         //修改flag实现点击导航栏显示不同的页面,pos为传入的参数        
  83.         setIndex: function (pos) {        
  84.             //设置flag,flag改变后显示的页面也会对应的改变        
  85.             this.flag = pos        
  86.             //设置页面标题        
  87.             this.$page.setTitleBar({ text: this.tabBar.list[pos].name })        
  88.         }        
  89.     }            
  90. </script>
复制代码

导航栏的样式

(2)Tabbar/tabbar.css

  1. .container {        
  2.     flex-direction: column;        
  3.     justify-content: center;        
  4.     align-content: center;        
  5.     align-items: center;        
  6.     height: 500px;        
  7. }        
  8.          
  9. .footer-container {        
  10.     width: 100%;        
  11.     height: 65px;        
  12.     position: fixed;        
  13.     bottom: 0;        
  14.     margin-bottom: 0;        
  15.     background-color: #FFFFFF;        
  16.     border-top-width: 1px;        
  17.     border-top-color: #CCCCCC;        
  18.     z-index: 999;        
  19. }        
  20.          
  21. .footer-item {        
  22.     width: 25%;        
  23.     display: flex;        
  24.     flex-direction: column;        
  25. }        
  26.          
  27. .footer-item-img {        
  28.     margin-left: 32px;        
  29.     width: 30px;        
  30.     height: 30px;        
  31. }        
  32.          
  33. .tab-text {        
  34.     text-align: center;        
  35.     font-size: 12px;        
  36. }
复制代码


以下是各页面的内容,需在/Tabbar/tabbar.ux中引入

(1)Index/index.ux

  1. <template>        
  2.   <div>        
  3.     <text>首页</text>        
  4.   </div>        
  5. </template>
复制代码

(2)Type/type.ux

  1. <template>        
  2.   <div>        
  3.     <text>分类</text>        
  4.   </div>        
  5. </template>
复制代码

(3)My/my.ux
  1. <template>        
  2.   <div>        
  3.     <text>我的</text>        
  4.   </div>        
  5. </template>
复制代码

一切都做好之后本以为可以正常运行,可是快应用运行之后的界面却是这样的:

Screenshot_20190111-191513.jpg

界面全都乱了。。。。。

肯定是css出了问题,于是乎我便查阅资料,最后发现快应用的mainfest.json配置文件里有一个“config.designWidth”的选项,其说明如:

config.jpg

原来快应用可以设置页面的基准宽度,将基准宽度设置为375之后就正常啦!!!

width.jpg

最终的效果:

5.jpg

如果需要添加或删除页面,只需要修改Tabbar/tabbar.ux内tabBar.list的内容就可以啦^_^

不过一定要记得修改后必须要在Tabbar/tabbar.ux内引入相应的页面,并且在显示页面时做判断哦,如Tabbar/tabbar.ux内的:

  1. <!--根据不同的flag显示不同的页面-->        
  2.         <block if="{{flag==0}}">        
  3.             <!--显示"首页"-->        
  4.             <index></index>        
  5.         </block>        
  6.         <block elif="{{flag==1}}">        
  7.             <!--显示"分类"页面-->        
  8.             <type></type>        
  9.         </block>        
  10.         <block elif="{{flag==2}}">        
  11.             <!--显示"我的"页面-->        
  12.             <my></my>        
  13.         </block>
复制代码

最后,我将我的代码上传到github上了,有兴趣的同学可以git clone学习一下:https://github.com/RickyHal/quickApp_tabbar.git


回复

使用道具 举报

1

主题

3

帖子

20

积分

2019-9-4 17:24:56 显示全部楼层
我测试过,js部分报错,无法运行,还有,css不支持 z-index属性
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册