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. ABAP其实也是挺好的语言

    目前工作当中使用的编程语言是SAP平台的ABPA语言,出于好奇心,我想把之前用JAVA(用C++也写过,事实上,我每学一个新的语言,就会尝试去实现这个小程序)写过的计算一个正整数的因子的程序用ABAP ...

  2. NoSuchMethodError解决方法

    下面演示下如何在啥都不知道的情况下遇到该错误的解决思路: 随便找一个错误示例: Caused by: java.lang.NoSuchMethodError: org.eclipse.jdt.inte ...

  3. Error occurred during initialization of VM Could not reserve enough space for object heap

    Error occurred during initialization of VM Could not reserve enough space for object heap Java虚拟机(JV ...

  4. JAVA 8 函数式接口--Consumer

    从JDK8开始java支持函数式编程,JDK也提供了几个常用的函数式接口,这篇主要介绍Consumer接口.文本介绍的顺序依次为: 源码介绍 使用实例 jdk内对Consumer的典型使用 扩展类介绍 ...

  5. django Table doesn't exist

    1146 django Table '' doesn't exist   一:出错原因   手动在数据库中drop了一张表,重新执行python manage.py migrate时出错,提示不存在这 ...

  6. CUDA compiler driver nvcc 散点 part 2

    ● nvcc 编译流程图 ● sm 是向前兼容的,高的版本号是在低版本号的基础上添加了新功能得到的,同一 compute_XY 编译的 .cu 文件仅能向后 sm_ZW 的实 GPU 版本(Z > ...

  7. 转载:HTTPS证书的产生过程详解

    1.RSA身份验证的隐患 身份验证和密钥协商是TLS的基础功能,要求的前提是合法的服务器掌握着对应的私钥.但RSA算法无法确保服务器身份的合法性,因为公钥并不包含服务器的信息,存在安全隐患:    客 ...

  8. Photoshop CC安装与破解方法

    下载Photoshop CC与破解补丁 破解补丁就一个文件,amtlib.dll 断网安装Photoshop CC,提示登录选择稍后登录即可 安装成功后将破解补丁安装根目录的amtlib.dll替换即 ...

  9. sql中的不常见查询

    1.对于CROSS APPLY 和 OUTER APPLY 的应用: CROSS APPLY 类似于INNER JOIN 但是,可以规定对于满足条件的数据需要关联几行,应用场景: 每个零件把第一个工单 ...

  10. javaSE基础知识

    JVM,JRE,JDK三者的简单总结 1.见名解释 Java虚拟机(JVM):Java virtual machine简称JVM:“virtual”中文意思“虚拟的”,“machine”中文意思“机器 ...