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 相关文章推荐
js模拟滚动条(横向竖向)
Feb 22 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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中4种常用的抓取网络数据方法
2015/06/04 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
浅析Python基础-流程控制
2016/03/18 Python
python 排序算法总结及实例详解
2016/09/28 Python
使用python实现tcp自动重连
2017/07/02 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
2015年重阳节主持词
2015/07/04 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
Python Django搭建文件下载服务器的实现
2021/05/10 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL