vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换。vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码:
效果图
路由搭建
export default new Router({
routes: [
{
path: "/Home",
component: Home,
},
{
path: "/recommend",
component: Recommend
},
{
path: "/search",
component: Search
},
{
path: "/chat",
component: Chat
},
{
path: "/me",
component: Me
},
{
path: '/',
redirect: '/home'
},
]
});
页面模板搭建,src和on都要动态的绑定,使用三目运算判断每次点击切换
<div class="bottom-tab">
<div class="tab-item" @click="switchTo('/home')">
<img :src="'/home' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="首页">
<span :class="{on: '/home' === $route.path}">首页</span>
</div>
<div class="tab-item" @click="switchTo('/recommend')">
<img :src="'/recommend' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="推荐">
<span :class="{on: '/recommend' === $route.path}">推荐</span>
</div>
<div class="tab-item" @click="switchTo('/search')">
<img :src="'/search' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="搜索">
<span :class="{on: '/search' === $route.path}">搜索</span>
</div>
<div class="tab-item" @click="switchTo('/chat')">
<img :src="'/chat' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="聊天">
<span :class="{on: '/chat' === $route.path}">聊天</span>
</div>
<div class="tab-item" @click="switchTo('/me')">
<img :src="'/me' === $route.path ? tabBarImgArr[4].selected : tabBarImgArr[4].normal" alt="我的">
<span :class="{on: '/me' === $route.path}">我的</span>
</div>
</div>
在data里面定义tabBarImgArr:数组,用于存放图片。
tabBarImgArr:[ //图片切换
{normal: require('./../../../static/img/icon_home.png'), selected: require('./../../../static/img/icon_home_selected.png')},
{normal: require('./../../../static/img/icon_intro.png'), selected: require('./../../../static/img/icon_intro_selected.png')},
{normal: require('./../../../static/img/icon_search.png'), selected: require('./../../../static/img/icon_search_selected.png')},
{normal: require('./../../../static/img/icon_chat.png'), selected: require('./../../../static/img/icon_chat_selected.png')},
{normal: require('./../../../static/img/icon_mine.png'), selected: require('./../../../static/img/icon_mine_selected.png')}
]
在methods实现switchTo切换
methods:{
switchTo(path){
// console.log(this.$router)
this.$router.replace(path)
}
}
css样式效果
.bottom-tab
width %
height 50px
background-color #fff
position fixed
left 0px
bottom 0px
display flex
z-index
.tab-item
display flex
flex
flex-direction column
align-items center
justify-content center
font-size 14px
color #
img
width %
margin-bottom 2px
.on
color red
vue2.0实现底部导航切换效果的更多相关文章
- MUI底部导航切换子页面
1.登陆页面进入之后,进入到main页面,main页面只有一个底部导航,然后引入子页面进行渲染. <nav class="mui-bar mui-bar-tab" id=&q ...
- 微信小程序~TabBar底部导航切换栏
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
- Fragment实现底部选项卡切换效果
现在很多APP的样式都是底部选项卡做为首页的,实现这样的效果,我们一般有这样几种方式,第一,最屌丝的做法,我直接自定义选项卡视图,通过监听选项卡视图,逻辑控制内容页的切换,这样做的想法一般是反正这几个 ...
- Mui 底部导航切换
1.建好子模板目录 2.导航代码 <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" c ...
- MUI底部导航栏切换效果
首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/ho ...
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
- 二、Fragment+RadioButton实现底部导航栏
在App中经常看到这样的tab底部导航栏 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...
- Android商城开发系列(三)——使用Fragment+RadioButton实现商城底部导航栏
在商城第一篇的开篇当中,我们看到商城的效果图里面有一个底部导航栏效果,如下图所示: 今天我们就来实现商城底部导航栏,最终效果图如下所示: 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使 ...
- mui底部选项卡切换实现
MUI提供了两种webview和div模式,来实现底部选项卡切换 效果相同,div是在同一个页面实现所有切换块的页面,根据id导航,而webview是由多个页面组成,形成页面之间的来回跳转
随机推荐
- Example11(June 9,2015)
%--------------sort------------------------------- >> A=[ ; ; ] A = >> B=sort(A,)%A(:,)& ...
- [ajax] quick double or multiple click ajax submit cause chrome explorer's error snatshot
快速点击ajax提交,引发的错误截图1: snapshot -2:
- 【WinRT】获取 Uri 中的参数(QueryString)键值对
在控制台或者其它类型的项目中,可以添加 System.Web,使用以下代码来获取一个 Uri 中的参数 Uri uri = new Uri("http://www.cnblogs.com/h ...
- Web app制作细节:web app互动制作技巧
Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的制作, ...
- Regex Golf练习笔记(1)
正则表达式进阶练习:https://alf.nu/RegexGolf (此练习笔记) 正则表达式验证:https://regexr.com/ (1) (2) 注释:每个词的三个字母在后面重复出现了一 ...
- spring mvc配置ObjectMapper忽略无法识别的字段,以及一些博客推荐
通过Spring的MethodInvokingFactoryBean类实现的调用configure方法,此方法返回调用该方法的本身实例. 配置完毕后,可以在spring mvc的消息处理器中使用,为了 ...
- .NET高级代码审计(第一课)XmlSerializer反序列化漏洞
0X00 前言 在.NET 框架中的 XmlSerializer 类是一种很棒的工具,它是将高度结构化的 XML 数据映射为 .NET 对象.XmlSerializer类在程序中通过单个 API 调用 ...
- BitAdminCore框架应用篇:(二)创建一个简单的增删改查模块
NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookie ...
- C#获取微信二维码显示到wpf
微信的api开放的二维码是一个链接地址,而我们要将这个二维码显示到客户端.方式很多,今天我们讲其中一种. /// <summary> /// 获取图片路径 /// </summary ...
- [.net]线程基础
关于线程的诞生 早期的16位Windows只有一个执行线程,在执行各种程序时,如果这个线程运行出现了问题,就会“冻结”整个系统,使得系统处于未响应状态.这是一件多么尴尬的事儿,无论是用户还是微软自己, ...