由于公司要求开发百度小程序，所以我们采用uni-app开发的方式，一套代码多个小程序都可以用，在开发小程序的时候我们也经常会使用到tabbar。当然自己写出来也是不错的。这个就来介绍uni-app中的组件tabbar的使用方法。

一：在项目目录下创建好页面导航所需要的页面

二：在uni-app查找到tabbar方法

2.1我们可以点击uni-app官网，中的框架

2.2然后Ctrl+F键进行搜索tabBar

2.3然后点击tabBar，就会自动跳转到tabBar的地方

三：复制uni-app的tabBar的源码

3.1：复制

然后我们来解析一下这些啥意思

pagePath：我理解的是跳转的地址

iconPath：这是为点击时候的图标

selectedIconPath：这是点击后的图标

text：这是你下面导航的文字，也就是你图标下面带有的文字

list：大家看这个是一个数据包着的对象，就肯定知道里面可以放不少的数据，但是官网现在最少2个最多也就是5个

四：将复制的代码，放进自己项目文件夹的pages.json里面

放入以后一定修改好自己所需要的的参数。然后在进行保存，运行

vue uni-app项目中的tabbar的更多相关文章

  1. 最近做app项目中遇到的问题 以及一些常见注意事项

    最近做app项目中遇到的问题 1.时间兼容问题 var date = "2019-12-18 18:03:45" //不兼容代码 var newDate = new Date(da ...

  2. 在Vue&Element前端项目中，使用FastReport + pdf.js生成并展示自定义报表

    在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...

  3. 在Vue&Element前端项目中，对于字典列表的显示处理

    在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...

  4. vue - vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  5. VUE+webpack+npm项目中的RSA加解密

    一.安装jsencrypt npm i jsencrypt node_modules文件夹中出现jsencrypt 二.引入jsencrypt 在main.js中import: import JsEn ...

  6. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

  7. Vue cli2.0 项目中使用Monaco Editor编辑器

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  8. app项目中遇到TCP分包，H5端对分包进行拼包

    之前有个需求,由于H5端不支持TCPSocket通信,于是中间搭了个安卓框架作为通信的介质,在开发中遇到一个问题,当后端传一个比较大的数据上来时,一条完整的数据会没有规矩的分成若干个包,每条数据可能不 ...

  9. vue PC端项目中解决userinfo问题

    在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...

随机推荐

  1. PyQt学习随笔：Model/View中视图数据项编辑变动实时获取变动数据的方法

    对于Model/View中视图的数据编辑后怎么能实时获取编辑的数据变动位置和变动情况查阅了一些资料,终于基本弄明白必须重写Model的setData方法才能截获.setData方法是视图中各种角色数据 ...

  2. sql绕过小技巧

    两个空格代替一个空格,用Tab代替空格,%a0=空格: %20 %09 %0a %0b %0c %0d %a0 %00 /**/ /*!*/ 最基本的绕过方法,用注释替换空格: /* 注释 */ 使用 ...

  3. 记阿里云 RDS MySQL 的一个大坑

    花了一个下午的时间,终于把一个阿里云 RDS MySQL 的一个大坑填上了,解决方法令人匪夷所思!绝对会让各位看官感到大吃一惊,阿里云 RDS MySQL 居然有这样 xx 的大坑! 问题 最近应业务 ...

  4. chrome打开Axure Rp导出的html文件提示需要安装Axure Rp插件解决办法

    1.确保chrome安装了Axure Rp扩展插件,如果按照页面的提示去下载,但是打不开的话就是被墙了,贴上科学的上网梯子https://www.lanzous.com/i7i0wuh,直接下载打开就 ...

  5. WebFlux中thymeleaf视图找不到的问题解决

    由于在weblux临时增加一个H5的页面,发生如下错误 Whitelabel Error Page This application has no configured error view, so ...

  6. VMware 虚拟机网卡设置与外网访问

    1 查看虚拟机网卡设置,查看虚拟机网关. 2 然后,设置本地机器VMnet8网卡的IP地址和子网掩码.切记,IP地址不能与虚拟机网卡IP地址相同. 3 配置虚拟机Centos的ens33网卡 TYPE ...

  7. AWT06-事件处理

    在AWT中,用户的所有操作都要由事件处理来完成.Frame和组件本身没有处理事件的能力. 1.GUI事件处理机制 定义:在某个组件上发生某种操作时,自动触发某段代码. 事件处理涉及4个重要概念: 事件 ...

  8. 未雨绸缪，数据保护之NBU介质备份

    摘要:华为GaussDB目前已支持NBU介质的备份与恢复,本文主要描述了华为GaussDB数据库和NetBackup对接进行备份.恢复的配置方法与性能调优方法. 一.简介 企业要想避开自然灾难和站点中 ...

  9. spring的基础面试内容

    1.什么是spring? Spring 是个Java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring 框架目标是简化Java ...

  10. 我用 go-zero 一周实现了一个中台系统，已开源！

    作者:Jack 最近发现golang社区里出了一个新星的微服务框架,来自好未来,光看这个名字,就很有奔头,之前,也只是玩过go-micro,其实真正的还没有在项目中运用过,只是觉得 微服务,grpc ...