Usamos Vue para escribir proyectos móviles y, a menudo, escribimos la barra de navegación inferior. Aquí resumo un método de barra de navegación inferior más conveniente y práctico, y puede resolver el problema de que el estado seleccionado desaparece cuando se actualiza el navegador. También se puede seleccionar una pantalla adaptable. Echa un vistazo al efecto. Encontré el ícono en la parte inferior. Los estilos seleccionados y no seleccionados de las imágenes, de acuerdo con los requisitos de la empresa, también puede usar el tamaño de fuente para escribir. (Todo el código está pegado al final de este artículo)
El diseño ha sido escrito, en este archivo de blog.
Por supuesto, hay nuevas formas de escribir navegación
. Primero defina un seleccionado correspondiente a los datos () en la página de navegación El isSelect y la matriz atravesada, el texto correspondiente al icono debajo de la matriz y las direcciones de imagen seleccionadas y no seleccionadas. Nota: No escriba la dirección de la imagen directamente. Escríbala directamente como una cadena. No solo no se mostrará la imagen, sino que después del empaque, seguirá siendo la dirección aquí y no cambiará. El uso de la solicitud proporcionada por el paquete web para importar la dirección de la imagen puede resolver los problemas anteriores.
Archivo Nav.vue
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]')},
{title: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的[email protected]')}
]
}
},
Los datos básicos están configurados,
luego estamos en la plantilla.
<template>
<div class="Nav">
<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>
Luego escribimos en el script
methods: {
selectNav (title) { // 选中的是哪个路由导航
this.isSelect = title
}
这个方法里还可以根据title的值去跳转到相应的路由，这样一个基本的底部导航栏就是实现了。
或者
methods: {
selectNav (title) {
this.isSelect = title
switch (title) {
case '首页': this.$router.push('/home')
break
case '分类': this.$router.push('/classify')
break
case '米圈': this.$router.push('/ring')
break
case '购物车': this.$router.push('/shop')
break
case '我的': this.$router.push('/mine')
break
}
sessionStorage.setItem('isSelect', this.isSelect) // 存入sessionStorage里面
}
}
但是 电脑调试的时候会发现，刷新浏览器后，选中的状态还是有可能会消失。
Solución:
cada vez que haga clic para cambiar la navegación inferior, guarde el estado seleccionado en sessStorage. En el gancho montado, quita este estado y asígnalo a la variable isSelect, para que el estado seleccionado no desaparezca.
mounted () {
this.isSelect = sessionStorage.getItem('isSelect')
},
methods: {
selectNav (title) {
this.isSelect = title
sessionStorage.setItem('isSelect', this.isSelect)
}
}
Pero después de la prueba, se han descubierto nuevos problemas. Por ejemplo, en el estado actual de "círculo de medidor", ingreso directamente "http://localhost:8080/#/ring" en el navegador, para que el método anterior pueda ser utilizado para resolver No hay problema. La mejor manera es vincularlo con la ruta, ya sea que se haga clic o se cambie la ruta en el navegador, el estado seleccionado se muestra correctamente.
Es decir, al mapear el enrutamiento de componentes en router/index.js, agregue el nombre correspondiente, preferiblemente en inglés
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: '首页',
component:() => import('../views/Home.vue')
},
{
path: '/classify',
name: '分类',
component:() => import('../views/Classify.vue')
},
{
path: '/ring',
name: '米圈',
component: () => import('../views/Ring.vue')
},
{
path: '/shop',
name: '购物车',
component: () => import('../views/Shop.vue')
},
{
path: '/mine',
name: '我的',
component: () => import('../views/Mine.vue')
}
]
En este momento, el código en el gancho montado y el método de métodos en el archivo nav.vue se cambia a:
mounted () {
this.isSelect = this.$route.name
},
methods: {
selectNav (title) {
this.isSelect = this.$route.name
switch (title) {
case '首页': this.$router.push('/home')
break
case '分类': this.$router.push('/classify')
break
case '米圈': this.$router.push('/ring')
break
case '购物车': this.$router.push('/shop')
break
case '我的': this.$router.push('/mine')
break
}
}
}
Tenga en cuenta que el
terminal móvil generalmente requiere una adaptación a varios tamaños de pantallas de terminales móviles, puede optar por usar media query o js para controlar el tamaño de fuente. Aquí uso js para controlar el tamaño de fuente e introduzco el siguiente js en index.html.
* rem计算方式：设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem，32px = 0.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);
// 特别注意：是不需要再除以2的！无论设计图什么尺寸，算法一致。但需修改js 中 docWidth 变量为设计图宽度；默认设计图文档宽度为750px； 一些不使用rem的CSS属性。包括但不限于：border-width、border-radius、box-shadow、transform、background-size；
El código completo está abajo
<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]')},
{title: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的[email protected]')}
]
}
},
mounted () {
this.isSelect = this.$route.name // 重要的在这里和下边，也可以直接用判断 window.location.hash.indexOf('name这里是router里的name' > -1) 然后重新赋值默认选项
// 用了这个那就不用methods里的方法了，其实都一样
// 默认是首页了
/**
if(window.location.hash.indexOf('fenlei')>-1){ //
this.selectIndex =1 // 分类
} else if (window.location.hash.indexOf('miquan')>-1){
this.selectIndex =2 // 米圈
} else if (window.location.hash.indexOf('gouwuche')>-1){
this.selectIndex =2 // 购物车
} else if (window.location.hash.indexOf('wode')>-1){
this.selectIndex =2 // 我的
} else {
this.selectIndex = 0 // 首页
}
*/
},
methods: {
selectNav (title) {
this.isSelect = this.$route.name
switch (title) {
case '首页': this.$router.push('/home')
break
case '分类': this.$router.push('/classify')
break
case '米圈': this.$router.push('/ring')
break
case '购物车': this.$router.push('/shop')
break
case '我的': this.$router.push('/mine')
break
}
}
}
}
</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>
解决了