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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
jquery 学习笔记一
Apr 07 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
微信小程序下拉框功能的实例代码
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 for 循环语句使用方法详细说明
2010/05/09 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
Python SQLite3数据库操作类分享
2014/06/10 Python
python删除列表中重复记录的方法
2015/04/28 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python中几种自动微分库解析
2019/08/29 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
一个C/C++编程面试题
2013/11/10 面试题
博士生求职信
2014/07/06 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
小学工作总结2015
2015/05/04 职场文书
护士工作心得体会
2016/01/25 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书