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. send_keys results in Expected 【object Undefined】undefined to be a string解决方法:更新selenium+geckodriver+firefox

    很久之前在win10上配置的测试环境: python 3.6.1+ selenium 3.3.3+ geckodriver 0.15.0以前run case是正常的,今天去run 同样的case时发现 ...

  2. 名称 ****不是有效的标识符 sql

    假设存储过程:proc_test create proc proc_test @ProdID varchar(10) as begin declare @sql varchar(max) @sql = ...

  3. 三、CSS样式——列表

    概念: CSS列表属性允许你放置.改变列表标志,或者将图像作为列表项标志 属性 描述 list-style 简写列表项 list-style-image 列表项图像 list-style-positi ...

  4. Java——对象的复制、克隆、序列化

    原创作者: https://blog.csdn.net/lmb55/article/details/78277878对象克隆(复制)假如说你想复制一个简单变量.很简单: int apples = 5; ...

  5. vue设置路由跳转参数,以及接收参数

    最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link  :to ...

  6. LayaAir疑难杂症之三:1.7版本click()、execCommand('copy')函数不生效

    问题描述 在使用Laya1.7引擎开发H5游戏时,引入Js原生函数click( ),模拟一次点击事件,发现无效.在使用Laya1.7引擎开发H5游戏时,引入Js原生函数execCommand('cop ...

  7. k8s 命令补全

    安装:apt-get install bash-completion source <(kubectl completion bash) echo "source <(kubec ...

  8. 图表相同数据会自动合并问题(finereport)

    finereport中,对于图表的操作,当遇到需要显示多个重复分类下的多个值时,由于自动合并相同数据,无法达到效果反复查询手册无果后,困扰好久,终想到了一个解决的办法:1.给查询的数据添加个列序号,每 ...

  9. Android 开发 蓝牙开发

    前言 蓝牙开发其实分2个部分,一个是正常蓝牙功能的开发(比如Android蓝牙的互相连接.读取蓝牙列表.文件传输.蓝牙耳机等等).另外一个是BLE蓝牙开发(属于低功耗蓝牙设备,设备大多是血糖仪.蓝牙手 ...

  10. add-migration Build failed.

    >add-migration JczInfoDateTimeBuild failed. 1编译解决方案,看是否报错,不管哪个有错误都会迁移失败 2重启vs