转载自https://blog.csdn.net/wang1006008051/article/details/78686451?utm_source=blogxgwz6
data () { return { isSelect: '首页', nav: [ {title: '首页', url: require('../../assets/common/首页@2x.png'), url_one: require('../../assets/common/首页[email protected]')}, {title: '店铺', url: require('../../assets/common/店铺@2x.png'), url_one: require('../../assets/common/店铺[email protected]')}, {title: '创业直播', url: require('../../assets/common/直播@2x.png'), url_one: require('../../assets/common/直播[email protected]')}, {title: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的[email protected]')} ] } },
-
<ul>
-
<li v-for="item in nav" @click="selectNav(item.title)">
-
<img :src="isSelect === item.title ? item.url_one : item.url" alt="item.title">
-
<p :class="isSelect === item.title ? 'active' : ''">{{item.title}}
p>
-
li>
-
ul>
methods: { selectNav (title) { this.isSelect = title }
methods: { selectNav (title) { this.isSelect = title switch (title) { case '首页': this.$router.push('/index') break case '店铺': this.$router.push('/shop') break case '创业直播': this.$router.push('/live') break case '我的': this.$router.push('/my') break } sessionStorage.setItem('isSelect', this.isSelect) } }
mounted () { this.isSelect = sessionStorage.getItem('isSelect') }, methods: { selectNav (title) { this.isSelect = title sessionStorage.setItem('isSelect', this.isSelect) } }
routes: [ { path: '/', redirect: '/index' }, { path: '/index', name: '首页', component: index }, { path: '/live', name: '创业直播', component: live }, { path: '/my', name: '我的', component: my }, { path: '/shop', name: '店铺', component: shop } ]
mounted () { this.isSelect = this.$route.name },
* rem计算方式:设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem,32px = .32rem】 */ !function (window) { /* 设计图文档宽度 */ var docWidth = 750; var doc = window.document, docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var recalc = (function refreshRem () { var clientWidth = docEl.getBoundingClientRect().width; /* 8.55:小于320px不再缩小,11.2:大于420px不再放大 */ docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; return refreshRem; })(); /* 添加倍屏标识,安卓为1 */ docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { /* 添加IOS标识 */ doc.documentElement.classList.add('ios'); /* IOS8以上给html添加hairline样式,以便特殊处理 */ if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) doc.documentElement.classList.add('hairline'); } if (!doc.addEventListener) return; window.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); }(window);
rem计算方式:设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem,32px = 0.32rem】;
特别注意:是不需要再除以2的!
-
<template>
-
<div class="common_foot">
-
<ul>
-
<li v-for="item in nav" @click="selectNav(item.title)">
-
<img :src="isSelect === item.title ? item.url_one : item.url" alt="item.title">
-
<p :class="isSelect === item.title ? 'active' : ''">{{item.title}}
p>
-
li>
-
ul>
-
div>
-
template>
-
-
<script>
-
export
default {
-
data () {
-
return {
-
isSelect:
'首页',
-
nav: [
-
{
title:
'首页',
url:
require(
'../../assets/common/首页@2x.png'),
url_one:
require(
'../../assets/common/首页[email protected]')},
-
{
title:
'店铺',
url:
require(
'../../assets/common/店铺@2x.png'),
url_one:
require(
'../../assets/common/店铺[email protected]')},
-
{
title:
'创业直播',
url:
require(
'../../assets/common/直播@2x.png'),
url_one:
require(
'../../assets/common/直播[email protected]')},
-
{
title:
'我的',
url:
require(
'../../assets/common/我的@2x.png'),
url_one:
require(
'../../assets/common/我的[email protected]')}
-
]
-
}
-
},
-
mounted () {
-
this.isSelect =
this.$route.name
-
},
-
methods: {
-
selectNav (title) {
-
switch (title) {
-
case
'首页':
this.$router.push(
'/index')
-
break
-
case
'店铺':
this.$router.push(
'/shop')
-
break
-
case
'创业直播':
this.$router.push(
'/live')
-
break
-
case
'我的':
this.$router.push(
'/my')
-
break
-
}
-
this.isSelect =
this.$route.name
-
}
-
}
-
}
-
script>
-
-
<style lang="less" scoped>
-
.common_foot>ul{
-
position: fixed;
-
bottom: 0;
-
z-index: 1000;
-
height: 0.98rem;
-
width: 100%;
-
overflow: hidden;
-
background-color: white;
-
li{
-
float: left;
-
width: 25%;
-
height: 100%;
-
text-align: center;
-
cursor: pointer;
-
padding: 0.15rem 0 0.13rem 0;
-
}
-
p{font-size: 0.2rem;color: #7f7f7f;}
-
img{
-
width: 0.48rem;
-
height: 0.45rem;
-
}
-
.active{
-
color: #ffd100;
-
}
-
}
-
style>