前言

刚进新公司，有幸接触到从前后端不分离到前后端分离的一个过程，最开始对vue不太熟悉，下班自学一周就开始做了，可能会有很多问题，若有写不好的地方大佬们可以提出。

一、实现效果

需求：vue底部导航点击切换图标
效果：

二、大概思路图

三、代码实现

index.js(vuex)

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {// 目录标识（感觉不应该使用 localStorage，应该使用sessionStorage）DirectoryIdentifier: localStorage.getItem('DirectoryIdentifier') ? localStorage.getItem('DirectoryIdentifier') : ''},mutations: {// 保存目录标识saveDirectoryIdentifier (state, directoryIdentifier) {localStorage.setItem('DirectoryIdentifier', directoryIdentifier)state.DirectoryIdentifier = directoryIdentifier}}
})
export default store

login.vue

methods: {login () {if (this.loginForm.username === '' || this.loginForm.tmpPassword === '') {this.showPopup('账号或密码不能为空')} else {api.login(this.loginForm).then((data) => {console.log(data)if (data.code === '1') {// 保存目录标识(device)this.$store.commit('saveDirectoryIdentifier', 'device')this.$router.push('/home/device')} else {this.showPopup(data.message)}})}}

index.vue

<template><div class = "main"><div><router-view></router-view></div><ul class="nav-bottom"><li @click="directoryIdentifierClick('device')" v-if="isShowDevice"><router-link to="/home/device"><div><span class="nav-bottom-span nav-img"><img :src='deviceImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li><li @click="directoryIdentifierClick('deviceSensor')" v-if="isShowDeviceSensor"><router-link to="/home/device_sensor"><div><span class="nav-bottom-span nav-img"><img :src='deviceSensoImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li><li @click="directoryIdentifierClick('hospital')" v-if="isShowHospital"><router-link to="hospital" ><div><span class="nav-bottom-span nav-img"><img :src='hospitalImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li><li @click="directoryIdentifierClick('doctorReport')" v-if="isShowdDoctorReport"><router-link to="/home/doctor_report"><div><span class="nav-bottom-span nav-img"><img :src='doctorReportImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li><li @click="directoryIdentifierClick('user')" v-if="isShowUser"><router-link to="/home/user"><div><span class="nav-bottom-span nav-img"><img :src='userImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li></ul></div>
</template><script>
export default {name: 'Home',data () {return {deviceImgUrl: '../../../static/img/device-nav-out.png',deviceSensoImgUrl: '../../../static/img/device-sensor-out.png',hospitalImgUrl: '../../../static/img/hospital-nav-out.png',doctorReportImgUrl: '../../../static/img/prescription-nav-out.png',userImgUrl: '../../../static/img/user-out.png',isShowDevice: false,isShowDeviceSensor: false,isShowHospital: false,isShowdDoctorReport: false,isShowUser: false}},// 钩子事件(触发机制:初始化) 刷新标识定位问题mounted: function () {// 这个是获取权限，如果没有可以去掉this.getWechatChanelAcl()// mounted - 初始化定位标识this.initIdentifier()},// 钩子事件(触发机制：数据修改时)beforeUpdate: function () {// 这个是获取权限，如果没有可以去掉this.getWechatChanelAcl()},methods: {directoryIdentifierClick (directory) {this.setGrayIdentifier(directory)this.$store.commit('saveDirectoryIdentifier', directory)},// 设置灰色图片setGrayIdentifier (directory) {this.deviceImgUrl = (directory === 'device' ? '../../../static/img/device-nav-active.png' : '../../../static/img/device-nav-out.png')this.deviceSensoImgUrl = (directory === 'deviceSensor' ? '../../../static/img/device-sensor-active.png' : '../../../static/img/device-sensor-out.png')this.hospitalImgUrl = (directory === 'hospital' ? '../../../static/img/hospital-nav-active.png' : '../../../static/img/hospital-nav-out.png')this.doctorReportImgUrl = (directory === 'doctorReport' ? '../../../static/img/prescription-nav-active.png' : '../../../static/img/prescription-nav-out.png')this.userImgUrl = (directory === 'user' ? '../../../static/img/user-active.png' : '../../../static/img/user-out.png')},// mounted - 初始化定位标识initIdentifier () {let directoryIdentifier = this.$store.state.DirectoryIdentifierif (directoryIdentifier === null) {this.deviceImgUrl = '../../../static/img/device-nav-active.png'} else {this.setGrayIdentifier(directoryIdentifier)}},// mounted-beforeUpdate 获取目录资源权限getWechatChanelAcl () {let wechatChanelAcl = JSON.parse(this.$store.state.WechatChanelAcl)for (let index = 0; index < wechatChanelAcl.length; index++) {const chanelAcl = wechatChanelAcl[index]if (chanelAcl.permission === 'wecharsalechanel:rp_device:list') {this.isShowDevice = true} else if (chanelAcl.permission === 'wecharsalechanel:device_sensor:list') {this.isShowDeviceSensor = true} else if (chanelAcl.permission === 'wecharsalechanel:hospital:list') {this.isShowHospital = true} else if (chanelAcl.permission === 'wecharsalechanel:doctor_report:list') {this.isShowdDoctorReport = true} else if (chanelAcl.permission === 'wecharsalechanel:user:list') {this.isShowUser = true}}}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {background: #eee;
}
.nav-bottom {padding-top: 0;width: 100%;position: fixed;bottom: 0;border-top: 1px solid #eee;color: gray;background: #fff;height: 4rem;
}
.nav-bottom>li {float: left;width: 20%;text-align: center;box-sizing: border-box;height: 4rem;
}
.nav-bottom-span {font-size: 14px;display: block;line-height: 0.6rem;padding-top: 0.6rem;
}
.nav-img img {height: 1.3rem;
}
</style>

测试

Vue实现底部导航栏切换页面及图片相关推荐

Android底部导航栏切换页面填坑
** Android底部导航栏切换页面填坑 ** 这个效果的实现关键点就是给选项赋予两种状态,focused和normal,在主程序中用监听判断是否被选中,就给被选中的选项设focused为true, ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
Android中的底部导航栏切换TabContainerView
前言:在GitHub上看到一个框架,实现底部导航栏切换,感觉不错,就在这里总结一下. 参考:https://www.jianshu.com/p/9aaff43bbf9f https://github. ...
Axure RP 如何实现导航栏切换页面——母版
网站的导航功能是一个网站的最基本也是最为重要的功能之一,当我们在做项目时,点击导航按钮实现跳转页面,并且每次点击跳转都会有交互,运用母版,可大量减少设计时间,实现跳转页面. 以知乎网站为例: 总结为两 ...
Flutter底部导航栏BottomNavigationBar页面状态保持解决方案
网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章一行代代码置灰应用?对就是这么干在实际应用开发中,一般应用的首页面会有这种结构,在Flutter应用开发中,有多 ...
利用FrameLayout+LinearLayout实现Android底部导航栏切换
实现底部导航栏的方式有很多种,此处我只是采用了其中一种,其余的方法可自行百度去查询. 效果图展示一.布局文件内容 <?xml version="1.0" encoding= ...
qt 实现导航栏切换页面功能 stackedWidget
QStackedWidget是一个堆栈窗口控件,使用QStackedLayout布局,可以填充一些小控件,但同一时间只有一个小控件可以显示.QStackedWidget控件与QTabWidget类似, ...
qt 实现导航栏切换页面功能 QStackedLayout
QStackedLayout类提供了多页面切换的布局,一次只能看到一个界面.该类的继承层次结构如下: (QObject,QLayoutltem) - QLayout - QStackedLayout ...
Vue - tabbar(底部导航栏)
文章目录一.TabBar实现思路二.assets文件夹 2.1 在App.vue里面动态引用css文件三.基本搭建四.TabBar和TabBarItem组件封装 4.1 TabBar组件封装 ...

Vue实现底部导航栏切换页面及图片

前言

一、实现效果

二、大概思路图

三、代码实现

index.js(vuex)

login.vue

index.vue

测试

Vue实现底部导航栏切换页面及图片相关推荐

最新文章

热门文章