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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
php中动态修改ini配置
2014/10/14 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
javascript 写类方式之一
2009/07/05 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
node使用request请求的方法
2019/12/20 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
实习生矿工检讨书
2014/10/13 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
行政处罚事先告知书
2015/07/01 职场文书
导游词之河北邯郸
2019/09/12 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
redis protocol通信协议及使用详解
2022/07/15 Redis