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 相关文章推荐
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
javascript 实现map集合
Apr 03 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 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
提问的智慧
2006/10/09 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
关于Python 3中print函数的换行详解
2017/08/08 Python
人机交互程序 python实现人机对话
2017/11/14 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
Python的几种主动结束程序方式
2019/11/22 Python
Python接口测试get请求过程详解
2020/02/28 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
写给保洁员表扬信
2014/01/08 职场文书
学生实习介绍信
2014/01/15 职场文书
高三自我评价
2014/02/01 职场文书
校园活动宣传方案
2014/03/28 职场文书
春游踏青活动方案
2014/08/14 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
js作用域及作用域链工作引擎
2022/07/07 Javascript