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. Robot Framework安装及入门

    1. 安装 所有安装文件存放在:\Robotsoft64位文件夹下 1) 安装python2.7.14 a) 双击执行python-2.7.14.msi b) 安装后更改环境变量,添加python的安 ...

  2. php curl使用 常用操作

    1. http Get 简单的只需要 这四行 就 $ch = curl_init (); curl_setopt ( $ch, CURLOPT_URL, "http://site" ...

  3. 在chrome console中添加jQuery

    由于现有seajs等封装,jQuery等已不在全局暴露,即使网站中已使用jQuery,在console也使用不了. 在chrome中可以用以下代码加入jQuery: fetch('http://cod ...

  4. windows下nginx的安装及使用（转载）

    转载自:https://www.cnblogs.com/jiangwangxiang/p/8481661.html 1.下载nginx http://nginx.org/en/download.htm ...

  5. DatetimeHelper，时间帮助类

    public static class DateTimeEx { /// <summary> /// 得到中文形式的日期 /// </summary> /// <para ...

  6. mybatis学习 -每天一记 mybatis insert null 报错

    mybatis 插入数据,model的属性存在null,插入报错 在使用mybatis 进行insert时,如果字段值存在null的情况,会出现插入失败的情况,解决方案: 如果使用spring boo ...

  7. python yield 与 yield from转

    python yield 与 yield from转 https://blog.csdn.net/chenbin520/article/details/78111399?locationNum=7&a ...

  8. 我与OO （1）

    前言 “真正的勇士敢于面对惨淡的人生,敢于面对淋漓的鲜血” 我是谨慎拜读了鲁迅先生的名言,怀着崇敬的精神去接触这门课程的. 而当我真的经历了这门课程以后,我才发现,刘和珍君这样的觉悟,我们普通人,果然 ...

  9. JAVA_maven 配置

    前人种树: https://www.cnblogs.com/supiaopiao/p/7276805.html?utm_source=itdadao&utm_medium=referral

  10. 用phpstudy配置网站遇到的一些问题

    第一次是配置在我本机,总是连不上数据库,后来查看到mysql.ini配置文件里面端口号有一个不是3306,更改之后就好了. 第二次是配置在笔记本电脑上,安装的时候比较顺利,也就遇到80端口被占用还有缺 ...