1、 安装taro-ui (此处使用cnpm)

  cnpm install taro-ui

2、 全局引入样式 app.scss

  sass :@import "~taro-ui/dist/style/index.scss";

3、 使用tabBar组件中引入AtTabBar ,详情可查询官网:https://taro-ui.aotu.io/#/docs/tabbar

  import { AtTabBar } from 'taro-ui'
  @import "~taro-ui/dist/style/components/tab-bar.scss";

  npm run dev:h5启动项目报错:

  

  官网介绍如下,请先设置再运行,项目便可正常运行;

  

4、 调用AtTabBar组件

  

5、 路由跳转到对应的页面,需先在app.js中定义路径

  

  注意事项:1. url用绝对路径时需要在最开始加“/”;2. 在toolbar定义过的页面不能跳转;

  

以上便可实现tabBar路由跳转;

新手学习,望各位大神多多指教;

Taro-ui TabBar组件使用路由跳转的更多相关文章

  1. vue+element的el-menu组件实现路由跳转及当前项的设置

    <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...

  2. mint ui的tabBar监听路由变化实现tabBar切换

    说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应 ...

  3. 关于elementUi tab组件路由跳转卡死问题

    好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi   后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...

  4. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  5. Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据

    准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...

  6. 提示框,对话框,路由跳转页面,跑马灯,幻灯片及list组件的应用

    目录: 主页面的js业务逻辑层 主页面视图层 主页面css属性设置 跳转页面一的js业务逻辑层 跳转页面一的视图层 跳转页面二的视图层 跳转页面三的js业务逻辑层 跳转页面三的视图层 跳转页面三的cs ...

  7. vue如何在路由跳转的时候更新组件

    项目中在路由跳转的时候碰到一个问题,没有更新视图,如何解决呢: https://segmentfault.com/a/1190000008879966 http://www.tuicool.com/a ...

  8. element---------------el-menu组件_实现路由跳转及当前项的设置

    <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...

  9. iOS 组件化 —— 路由设计思路分析

    原文 前言 随着用户的需求越来越多,对App的用户体验也变的要求越来越高.为了更好的应对各种需求,开发人员从软件工程的角度,将App架构由原来简单的MVC变成MVVM,VIPER等复杂架构.更换适合业 ...

随机推荐

  1. Oracle “CONNECT BY” (层级递归查询)

    Oracle “CONNECT BY”是层次查询子句,一般用于树状或者层次结果集的查询.其语法是: ? 1 2 [ START WITH condition ] CONNECT BY [ NOCYCL ...

  2. 基于墨刀实现的购物app

    在观察研究购物app后 仔细分析总结了几个基础功能,实现如下的界面: 主界面:购物app的推荐界面,提供各式的样品,将整个app的多种功能进行展示. 推荐分类:根据用户浏览的宝贝,对用户进行合理推荐. ...

  3. MVC和WebApi的区别:

    1.mvc 和WebApi: 区别: a.MVC是建立网站的一种框架,倾向于返回用户的页面请求:webApi倾向于返回用户数据请求 b.mvc直接继承system.mvc.controller:web ...

  4. Win10和Ubuntu双系统搭建详

    最近学习云计算时,需要搭建xen和Hadoop,虚拟机容易出很多问题所以搭建了双系统,也方便以后的学习. 下面是详细搭建过程: 准备材料: U盘(容量>8G,最好是3.0接口速度快).Ultra ...

  5. SpringBoot+Mybatis实现关联查询

    SpringBoot+Mybatis实现关联查询 今天学习了下Mybatis的动态查询,然后接着上次的Demo改造了下实现表的关联查询. 话不多说,开始今天的小Demo 首先接着上次的项目 https ...

  6. PyQt5实现邮件合并功能(GUI)

    1. 实战Word批量 需要处理批量替换word的一些数据,数据源从Excel中来. Excel的百分数会变为数字,以及浮点数会多好多精度,为了原汁原味的数据,直接复制数据到文本文件.通过\t来分隔即 ...

  7. Spark启动报错|java.io.FileNotFoundException: File does not exist: hdfs://hadoop101:9000/directory

    at org.apache.spark.deploy.history.FsHistoryProvider.<init>(FsHistoryProvider.scala:) at org.a ...

  8. QAC静态测试配置及使用教程

    使用前提:安装成功QAC软件. . 1.打开软件如上 . 2.file->Auto-Create-Project,出现如下所示对话框 1-工程名字 2-将要分析的代码路径 3-代码报告输出路径 ...

  9. Python中的split()函数的用法

    函数:split() Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(lis ...

  10. Python module ---- re

    Python 的 re 模块(Regular Expression 正则表达式)提供各种正则表达式的匹配操作,在文本解析.复杂字符串分析和信息提取时是一个非常有用的工具.python的re模块,在绝大 ...