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中dataGrid设置行的高度示例代码
Jan 03 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
js编写简单的计时器功能
Jul 15 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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+APACHE实现用户论证的方法
2006/10/09 PHP
php 文件上传系统手记
2009/10/26 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python程序暂停的正常处理方法
2019/11/07 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
会计职业生涯规划范文
2014/01/04 职场文书
经典演讲稿汇总
2014/05/19 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
公益广告标语
2014/06/19 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL