vue组件tabbar使用方法详解


Posted in Javascript onNovember 06, 2018

本文实例为大家分享了vue组件tabbar的具体使用方法,供大家参考,具体内容如下

1.App.vue

<!-- 入口文件 -->
<template>
 <div id="app">
 <!-- 视图层 -->
 <router-view></router-view>
 <!-- 底部选项卡 -->
 <tabbar @on-index-change="onIndexChange" v-if="tabbarShow">
  <tabbar-item selected link="/home">
  <img slot="icon" src="./assets/img/ic_tab_home_normal.png">
  <img slot="icon-active" src="./assets/img/ic_tab_home_active.png">
  <span slot="label">首页</span>
  </tabbar-item>
  <tabbar-item show-dot link="/audioBook">
  <img slot="icon" src="./assets/img/ic_tab_subject_normal.png">
  <img slot="icon-active" src="./assets/img/ic_tab_subject_active.png">
  <span slot="label">书影音</span>
  </tabbar-item>
  <tabbar-item badge="2" link="/mine">
  <img slot="icon" src="./assets/img/ic_tab_profile_normal.png">
  <img slot="icon-active" src="./assets/img/ic_tab_profile_active.png">
  <span slot="label">我的</span>
  </tabbar-item>
 </tabbar>
 </div>
</template>
 
<script>
 // 引入 vux tabbar 组件
 import { Tabbar, TabbarItem } from 'vux'
 // 引入 vuex 的两个方法
 import {mapGetters, mapActions} from 'vuex'
 
 export default {
 name: 'app',
 components:{
  Tabbar,
  TabbarItem
 },
 data() {
  return {
  select:"Home"
  }
 },
 // 计算属性
 computed:mapGetters([
  // 从 getters 中获取值
  'tabbarShow'
 ]),
 // 监听,当路由发生变化的时候执行
 watch:{
  $route(to,from){
  if(to.path == '/' || to.path == '/home' || to.path == '/audioBook' || to.path == '/mine'){
   /**
   * $store来自Store对象
   * dispatch 向 actions 发起请求
   */
   this.$store.dispatch('showTabBar');
  }else{
   this.$store.dispatch('hideTabBar');
  }
  }
 },
 methods: {
  onIndexChange (newIndex, oldIndex) {
  console.log(newIndex, oldIndex);
  }
 }
 }
</script>
 
<style lang="less" scoped>
 
</style>

2.效果图

vue组件tabbar使用方法详解

3.其他情况

<template>
 <div class="weui-tab">
 <div class="weui-tab__panel">
  <p v-for="i in 100">{{i}}</p>
 </div>
 <tabbar>
  <!--use v-link-->
  <tabbar-item v-link="{path:'/component/cell'}">
  <img slot="icon" src="../assets/demo/icon_nav_button.png">
  <span slot="label">Wechat</span>
  </tabbar-item>
  <!--use http link-->
  <tabbar-item show-dot link="https://vux.li">
  <img slot="icon" src="../assets/demo/icon_nav_msg.png">
  <span slot="label">Message</span>
  </tabbar-item>
  <!--use vue-router link-->
  <tabbar-item selected link="/component/cell">
  <img slot="icon" src="../assets/demo/icon_nav_article.png">
  <span slot="label">Explore</span>
  </tabbar-item>
  <!--use vue-router object link-->
  <tabbar-item :link="{path:'/component/cell'}">
  <img slot="icon" src="../assets/demo/icon_nav_cell.png">
  <span slot="label">News</span>
  </tabbar-item>
 </tabbar>
 </div>
</template>
 
<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
 ready () {
 document.querySelector('body').style.height = '100%'
 document.querySelector('html').style.height = '100%'
 document.querySelector('#app').style.height = '100%'
 },
 components: {
 Tabbar,
 TabbarItem
 }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
微信小程序实现签字功能
Dec 23 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
Vue 数据响应式相关总结
Jan 28 Vue.js
微信小程序下拉框功能的实例代码
Nov 06 #Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 #Javascript
小程序实现页面顶部选项卡效果
Nov 06 #Javascript
Vue常用的几个指令附完整案例
Nov 06 #Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 #Javascript
100行代码实现一个vue分页组功能
Nov 06 #Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 #Javascript
You might like
php共享内存段示例分享
2014/01/20 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
Python中for循环详解
2014/01/17 Python
Python中subprocess的简单使用示例
2015/07/28 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python提取网页中超链接的方法
2016/09/18 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
PyQt5实现简单的计算器
2020/05/30 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
2013的个人自我评价
2013/12/26 职场文书
经销商培训邀请函
2014/01/21 职场文书
双十佳事迹材料
2014/01/29 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
golang特有程序结构入门教程
2021/06/02 Python