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轻松处理json文本方便而老古
Feb 17 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
jQuery取id有.的值的方法
May 21 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
微信小程序下拉框功能的实例代码
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加密解密的代码
2006/10/09 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
Python 3.x 新特性及10大变化
2015/06/12 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
如何使用python操作vmware
2019/07/27 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
用Python实现屏幕截图详解
2022/01/22 Python