【vuejs】有关UI框架“ydui”中的tabbar底部导航的应用以及tabbar切换激活状态的现实

在做移动端应用的时候，底部导航tabbar是必不可少的。
在这里，我用的是vue移动端的ui框架：ydui。长得想当的好看，我很喜欢。

文档中是这么写的：

<template><yd-tabbar><yd-tabbar-item title="首页" link="#"><yd-icon name="home" slot="icon" size="0.54rem"></yd-icon></yd-tabbar-item><yd-tabbar-item title="购物车" link="#"><yd-icon name="shopcart-outline" slot="icon" size="0.54rem"></yd-icon></yd-tabbar-item><yd-tabbar-item title="个人中心" link="#"><yd-icon name="ucenter-outline" slot="icon" size="0.54rem"></yd-icon></yd-tabbar-item><yd-tabbar-item title="图片" link="#"><img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png"></yd-tabbar-item></yd-tabbar>
</template>

这里面，可以用icon，也可以用图片。当用到图片的时候，可能切换tabbar的激活样式就要自己来完成了。我自己就写了一个想当简单的代码。

我自己的tabbar文件：

<template><yd-tabbar class="tabbars"><yd-tabbar-item :title="item.title" :link="item.linkTo" v-for="(item,index) in tabbar" :key="index" :active="item.active" active-color="#ff524f"><img slot="icon" :src="item.activeImg" v-if="item.active"><img slot="icon" :src="item.normalImg" v-else></yd-tabbar-item></yd-tabbar>
</template><script type="text/javascript">
export default {data() {return {tabbar: [{title: "参与挑战",normalImg: "./static/images/icon_rl@2x2.png",activeImg: "./static/images/icon_rl@2x.png",linkTo: "/join",active: true},{title: "排行榜",normalImg: "./static/images/icon_ph@2x2.png",activeImg: "./static/images/icon_ph@2x.png",linkTo: "/rank",active: false},{title: "邀请好友",normalImg: "./static/images/icon_yq@2x2.png",activeImg: "./static/images/icon_yq@2x.png",linkTo: "/invite",active: false},{title: "个人中心",normalImg: "./static/images/icon_gr@2x2.png",activeImg: "./static/images/icon_gr@2x.png",linkTo: "/mine",active: false}]};},watch: {//根据路由变化来改变样式$route: {handler: function(val, oldVal) {//得到新的地址和老的地址，得到新的地址时，找到data中的tabbar数据，然后将激活状态设置为true，然后再根据代码中的v-if来显示就行了var tabbar = this.tabbar;for (var i = 0; i < tabbar.length; i++) {if (tabbar[i].linkTo == path) {tabbar[i].active = true;} else {tabbar[i].active = false;}}this.tabbar = tabbar;},// 深度观察监听deep: true}},
};
</script>
<style>
.tabbars{height: 50px !important;
}
</style>

我个人觉得我这个方法还是比较简单易懂的，不知道还有没有更简单的方法

【vuejs】有关UI框架“ydui”中的tabbar底部导航的应用以及tabbar切换激活状态的现实相关推荐

flutter TabBar 底部导航栏
更多文章请查看 lutter从入门到精通实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
微信小程序把玩(三)tabBar底部导航
为什么80%的码农都做不了架构师?>>> tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多 ...
Android肝帝战纪之基于上篇单Activity+多Fragment框架，开发电商式导航栏，多Fragment切换
电商式导航栏,多Fragment切换本文默认在已经搭建好的框架上进行开发点此链接到上一篇基础框架的搭建界面构思示意图设计思路在底部的LinearLayout中添加相应的图标,然后设置tag绑 ...
hbuilderx 底部_如何在Hbuilder中制作app底部导航栏
. 1 问题描述最近在使用Hbuilder进行移动app前端开发中,我通常搭建首页框架的常规方法是在index.html主文件中使用多种框架组件模块,再通过css叠层样式表对相应模块加以修饰.但在分 ...
Vue - tabbar(底部导航栏)
文章目录一.TabBar实现思路二.assets文件夹 2.1 在App.vue里面动态引用css文件三.基本搭建四.TabBar和TabBarItem组件封装 4.1 TabBar组件封装 ...
android导航条高度修改,Android中修改TabLayout底部导航条Indicator长短的方法
前言对于Tablayout相信大家都不陌生,在开发中使用的应该很频繁了,但是底部导航条长短是固定死的,需要自己来改动长短,找了半天没找着方法,看了下官方建议,可以通过映射来修改自己想要的长短,其实也 ...
android底部导航栏带消息数的框架,GitHub - BarkSheep/Android-NavMenuLayout: 一个底部导航栏, 实现了显示未读消息数, 显示红点等效果的封装...
Android-NavMenu-master 一个底部导航栏, 实现了显示未读消息数, 显示红点等效果的封装. 添加依赖 1. 在项目根目录的 build.gradle 中添加 allprojects ...
uView（Tabbar 底部导航栏）
(一)第一种方式 1,每个菜单页面都要 "首页" "发布" "我的" 每个页面都要 <template><view> ...
vant tabbar底部导航的使用
新建home.js <template><div id="home"><div class="tabbar_content"> ...
【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录. 官网定义:Element,一套为开发者.设计师和产品经理 ...

【vuejs】有关UI框架“ydui”中的tabbar底部导航的应用以及tabbar切换激活状态的现实

【vuejs】有关UI框架“ydui”中的tabbar底部导航的应用以及tabbar切换激活状态的现实相关推荐

最新文章

热门文章