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. jmeter向ActiveMQ发送消息_广播/订阅(Topics 队列)

    问题描述:测试中需要模拟大量设备的消息上报到平台,但是实际测试中没有那么多设备,所以采取用jmeter直接往ActiveMQ模拟发送设备消息 解决思路:获取平台采取的是Queues还是Topics : ...

  2. (整理) .NET IIS性能优化

    本文收集了部分性能优化的方式,缓存.压缩.线程池调整等等,仅供参考. 1 .NET 程序中的调整 程序Sqlhelper中使用缓存 使用JSON序列化器(Jil)取代Json.NET 2 .NET 程 ...

  3. CSS3之圣杯布局和双飞翼布局

    圣杯布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. Python数据类型的内置函数之list(列表)

    Python数据类型内置函数 - str(字符串) - list(列表) - tuple(元组) - dict(字典) - set(收集) list(列表)的操作 - (append)在列表最后追加指 ...

  5. html 常用button事件

    <input onclick="document.all.WebBrowser.ExecWB(1,1)" type="button" value=&quo ...

  6. 用 Python 获取 B 站播放历史记录

    用 Python 获取 B 站播放历史记录 最近 B 站出了一个年度报告,统计用户一年当中在 B 站上观看视频的总时长和总个数.过去一年我居然在 B 站上看了2600+个视频,总计251个小时,居然花 ...

  7. java生成简单验证码图片

    概要 最近项目需要用java实现输出随机验证码图片到前台,正好有机会接触下java的绘图类,完成需求后也有时间做个总结,写篇随笔记录下也希望能帮助到有同样需求的人! 需求流程图 1.生成随机数 在ja ...

  8. Exp3 免杀原理与实践 20164313

    基础 AV厂商检测恶意软件的三种主流方式: 基于特征码的检测 启发式恶意软件检测 基于行为的恶意软件检测 实现免杀就是防止恶意软件被这是三种方式找到.具体手段为: 改变特征码 改变行为 非常规恶意软件 ...

  9. 【Python】itchat

    错误:http://bbs.51cto.com/thread-1501477-1.html 解决方法降低certifi版本 >>> import itchat >>> ...

  10. 解决由于服务器调用删除或添加字段后CXF客户端未更新导致异常问题org.apache.cxf.interceptor.Fault: Unmarshalling Error: Unexpected element

    采用CXF客户端调用Webservice服务,由于服务端时不时会对Webservice服务删除或添加一些字段,而CXF未及时更新客户端代码导致再次调用服务时报异常错误: Interceptor for ...