1. Prefacio:
A veces, los miniprogramas de WeChat encuentran fusión de códigos, como migrar el código del miniprograma B al miniprograma A, lo que convierte a B en una subfunción de subpágina del miniprograma A. Debido a que el mini programa en sí tiene una barra de pestañas, resulta que B también tiene una barra de pestañas. En este momento, es necesario personalizar una barra de navegación inferior de la barra de pestañas para la subfunción B. (Tenga en cuenta que esta no es una barra de pestañas personalizada para el subprograma WeChat. No es necesario establecer un atributo personalizado en app.json, porque la barra de pestañas de A no se puede modificar. Simplemente agrega una barra de pestañas adicional al módulo de subfunción, lo que equivale a simplemente personalizar un componente. .)
2. Implementación:
1. La implementación es muy simple. El primer paso es crear una carpeta de componentes en cualquier ubicación. Simplemente escriba la ruta de referencia correctamente. Aquí defino dos pestañas: "Inicio" y "Mi":
wxml:
<view class="fix-btm">
<view class="fix-btm-list" catchtap="switchTab" data-url="点击需要跳转的tab页面路径">
<view class="fix-btn-img">
<image class="fix-btm-img" mode="widthFix" src="{
{selected==0 ? '点击时图片路径' : '未点击时图片路径'}}" />
<text class="{
{selected==0 ? 'active' : ''}}">首页</text>
</view>
</view>
<view class="fix-btm-list" catchtap="switchTab" data-url="点击需要跳转的tab页面路径">
<view class="fix-btn-img">
<image class="fix-btm-img" mode="aspectFit" src="{
{selected==1 ? '点击时图片路径' : '未点击时图片路径'}}" />
<text class="{
{selected==1 ? 'active' : ''}}">我的</text>
</view>
</view>
</view>
wxss:
/* 底部栏 */
.fix-btm {
display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 104.166rpx;
background-color: #fff;
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, .1);
}
.fix-btm-list{
flex:1;
overflow: hidden;
}
.fix-btn-img{
width: 100%;
height: 100%;
text-align: center;
position: relative;
}
.fix-btm-img{
width: 33.333rpx;
height: 33.333rpx;
display: block;
padding-top: 19.444rpx;
margin: 0 auto;
}
.fix-btm-list .fix-btn-img .red-dot,
.fix-btm-list .fix-btn-img .red-msg{
width: 16.666rpx;
height: 16.666rpx;
z-index: 1000;
position: absolute;
top: 14rpx;
transform: translateX(30rpx);
background-color: #FF2929;
border-radius: 20rpx;
}
.fix-btm-list .fix-btn-img .red-dot{
right: 50%;
}
.fix-btm-list .fix-btn-img .red-msg{
width: auto;
height: auto;
color: #fff;
font-size: 16.666rpx;
padding: 2rpx 8rpx;
left: 50%;
transform: translateX(50%);
}
.fix-btm-list text{
font-size: 25rpx;
color: #8A8A8A;
}
.fix-btm-list text.active{
color: #0072FF;
}
js:
Component({
/**
* 组件的属性列表
*/
properties: {
selected: {
type:Number,
value:0
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
let url = e.currentTarget.dataset.url
//这个方法如果调用，会导致tab bar闪动一下，这个是个bug
/* this.setData({
selected: index
}) */
// wx.switchTab({ url })
wx.reLaunch({
url
})
}
}
})
json:
{
"component": true,
"usingComponents": {
}
}
- Componentes de referencia, haga referencia al componente de la barra de pestañas en la página de inicio y en mi página:
Introducción al archivo json 'Página de inicio':
{
"usingComponents": {
"tabBar":"组件文件路径"
},
}
El archivo wxml de la 'Página de inicio' se introduce y escribe en la parte inferior:
<tabBar selected="0"></tabBar>
Se importa 'Mi' archivo json:
{
"usingComponents": {
"tabBar":"组件文件路径"
},
}
'Mi' archivo wxml se importa y se escribe en la parte inferior:
<tabBar selected="1"></tabBar>
3. Conclusión:
886, el próximo viaje será muy productivo.
Dirección de almacén de My Bilibili Space Gitee: Código fuente de todos los efectos especiales
Otros artículos:
~ Sígueme para ver efectos especiales creativos más simples:
efecto de humo de texto html+css+js
reflexión envolvente cargando efecto especial html+css
fondo flotante de burbuja efecto especial html+css
simple Reloj efecto especial html+css+js
botón estilo cyberpunk html+css
imitación NetEase Cloud sitio web oficial imagen de carrusel html+css+js
animación de carga de onda de agua html+css
barra de navegación efecto degradado de desplazamiento html+css+js
cambio de página del libro html+css
Álbum de fotos tridimensional 3D html+css
efecto de tablero de dibujo de neón html+css+js
nota algún resumen de atributos css (1)
Nota resumida de Sass
... espera y
ve a mi página de inicio para ver más ~