网络编程 
首页 > 网络编程 > 浏览文章

vue组件tabbar使用方法详解

(编辑:jimmy 日期: 2024/11/17 浏览:3 次 )

本文实例为大家分享了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="/UploadFiles/2021-04-02/ic_tab_home_normal.png">

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="/UploadFiles/2021-04-02/icon_nav_button.png">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:Vue 实时监听窗口变化 windowresize的两种方法
下一篇:微信小程序下拉框功能的实例代码
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。