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 相关文章推荐
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
javascript判断office版本示例
Apr 11 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
vue-cli常用设置总结
Feb 24 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中TP5 上传文件的实例详解
2017/07/31 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
JsDom 编程小结
2011/08/09 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
浅谈node的事件机制
2017/10/09 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
Python中分数的相关使用教程
2015/03/30 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
python实现下载文件的三种方法
2017/02/09 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
行政部主管岗位职责
2013/12/28 职场文书
库房主管岗位职责
2013/12/31 职场文书
优秀民警事迹材料
2014/01/29 职场文书
大学生校园创业计划书
2014/02/08 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
高中语文教学反思范文
2016/02/16 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP