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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
js Calender控件使用详解
Jan 05 Javascript
js canvas实现擦除动画
Jul 16 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php自动加载代码实例详解
2021/02/26 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
在centos7中分布式部署pyspider
2017/05/03 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Python中反射和描述器总结
2018/09/23 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
实例代码讲解Python 线程池
2020/08/24 Python
Python实现自动整理文件的脚本
2020/12/17 Python
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
SQL Server笔试题
2012/01/10 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
人事专员的职责
2014/02/26 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python