1. Предисловие:
Иногда мини-программы WeChat сталкиваются со слиянием кода, например, при переносе кода мини-программы B в мини-программу A, в результате чего B становится подфункцией подстраницы мини-программы A. Поскольку в самой мини-программе есть панель вкладок, оказывается, что панель вкладок есть и у B. На данный момент необходимо настроить нижнюю панель навигации панели вкладок для подфункции B. (Обратите внимание, что это не пользовательская панель вкладок для апплета WeChat. Нет необходимости устанавливать пользовательский атрибут в app.json, поскольку панель вкладок A не может быть изменена. Она просто добавляет дополнительную панель вкладок в модуль подфункции, что эквивалентно простой настройке компонента. .)
2. Реализация:
1.Реализация очень простая.Первый шаг - создать папку компонента в любом месте.Просто правильно прописываем путь к ссылке.Здесь я определяю две вкладки: "Главная" и "Моя":
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": {
}
}
- Ссылочные компоненты, ссылка на компонент панели вкладок на главной странице и моей странице:
Введение в json-файл «Домашняя страница»:
{
"usingComponents": {
"tabBar":"组件文件路径"
},
}
Wxml-файл «Домашняя страница» представлен и написан внизу:
<tabBar selected="0"></tabBar>
«Мой» json-файл импортируется:
{
"usingComponents": {
"tabBar":"组件文件路径"
},
}
«Мой» файл wxml импортируется и записывается внизу:
<tabBar selected="1"></tabBar>
3. Заключение:
886, следующее путешествие будет очень продуктивным.
Адрес склада My Bilibili Space Gitee: Исходный код всех спецэффектов
Другие статьи:
~ Следуйте за мной, чтобы увидеть больше простых творческих спецэффектов:
текстовый эффект дыма html+css+js
объемное отражение загрузка специального эффекта html+css
пузырь плавающий фон специальный эффект html+css
простой специальный эффект часов html+css+js
кнопка в стиле киберпанк html+css
имитация NetEase Cloud официальный сайт изображение карусели html+css+js
волна воды загрузка анимация html+css
панель навигации прокрутка эффект градиента html+css+js
перелистывание страниц книги html+css
3D-трехмерный фотоальбом html+css
эффект неоновой доски для рисования html+css+js
обратите внимание на некоторую сводку атрибутов CSS (1)
сводную заметку по Sass
... подождите и
перейдите на мою домашнюю страницу, чтобы увидеть больше ~