微信小程序开发教程、开发教学
本视频为1-1号视频,做出了底部导航栏的凸起效果
第一次做视频,希望大家多多支持~
组件源码+项目源码:
链接:https://pan.baidu.com/s/1EkZx_nYyr_hfR1onZXOQ4Q
提取码:gojf
-------2020-8-24补充
在这里插入图片描述先上效果图因为多处需要使用这个tabbar,所以我们决定把他封装成一个组件,
希望可以帮到你哦~
组件代码
wxml
<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
<block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
<navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.color}}" bindtap="shareTherelease" data-url="{{item.pagePath}}" open-type="navigate">
<view class='special-wrapper'>
<image class="tabbar_icon" src="{{item.iconPath}}"></image>
</view>
<image class='special-text-wrapper'></image>
<text>{{item.text}}</text>
</navigator>
<navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{{item.text}}</text>
</navigator>
</block>
</view>
wxss
.tabbar_box{
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 98rpx;
/* box-shadow: darkgrey 0px 0px 30px 5px ; */
}
.tabbar_box.iphoneX-height{
padding-bottom: 66rpx;
}
.middle-wrapper{
position: absolute;
right: 310rpx;
bottom: 0;
background-color: #fff;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
}
.middle-wrapper.iphoneX-height{
bottom: 66rpx;
}
.tabbar_nav{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20rpx;
height: 100%;
position: relative;
}
.tabbar_icon{
width: 50rpx;
height: 50rpx;
}
.special-wrapper{
position: absolute;
/* left: 77rpx; */
top: -52rpx;
width: 113rpx;
height: 113rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
background-color: #fff;
text-align: center;
box-sizing: border-box;
padding: 6rpx;
}
.special-wrapper .tabbar_icon{
width: 88rpx;
height: 88rpx;
padding-top: 7rpx;
}
.special-text-wrapper{
width: 56rpx;
height: 56rpx;
}
js
// tabBarComponent/tabBar.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
tabbar: {
type: Object,
value: {
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#1c1c1b",
"list": [
{
"pagePath": "pages/spaceHomePage/spaceHomePage",
"text": "觅书",
"iconPath": "/img/icon-findbook.png",
"selectedIconPath": "/img/icon-findbook1.png"
},
{
"pagePath": "pages/found/found",
"text": "发现",
"iconPath": "img/Restaurant1.png",
"selectedIconPath": "img/Restaurant.png"
},
{
"pagePath": "/pages/shareTherelease/shareTherelease",
"text": "共享/发布",
"iconPath": "pages/img/Restaurant1.png",
"selectedIconPath": "pages/img/Restaurant.png"
},
{
"pagePath": "pages/publicWelfare/publicWelfare",
"text": "公益",
"iconPath": "pages/img/friend1.png",
"selectedIconPath": "pages/img/friend.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "pages/img/mine1.png",
"selectedIconPath": "pages/img/mine.png"
}
]
}
}
},
/**
* 组件的初始数据
*/
data: {
// isIphoneX: app.globalData.systemInfo.model == "iPhone X" ? true : false,
},
/**
* 组件的方法列表
*/
// methods: {
// shareTherelease:{
// wx.navigateTo({
// url: '',
// })
// }
// },
methods: {
shareTherelease(e) {
console.log(e.currentTarget.dataset.url);
// wx.navigateTo({
// url: e.currentTarget.dataset.url
// })
}
}
})
因为用到了switchTab所以你得app.json里面配置上你需要switchTab的页面的目录,然后再app.js里面因隐藏掉原生的tabbar
//隐藏系统tabbar
wx.hideTabBar()
在项目中的app.js里面加上如下代码,是配置你自定义的tabbar
globalData: {
userInfo: null,
tabBar: {
"backgroundColor": "#ffffff",
"color": "#333333",
"selectedColor": "#26C55E",
"list": [
{
"pagePath": "/pages/spaceHomePage/spaceHomePage",
"text": "觅书",
"iconPath": "img/icon-findbook.png",
"selectedIconPath": "img/icon-findbook1.png"
},
{
"pagePath": "/pages/found/found",
"text": "发现",
"iconPath": "img/icon-found.png",
"selectedIconPath": "img/icon-found1.png"
},
{
"pagePath": "/pages/shareTherelease/shareTherelease",
"isSpecial": true,
"text": "共享/发布",
"iconPath": "img/icon_release.png",
"selectedIconPath": "img/icon_release.png",
},
{
"pagePath": "/pages/publicWelfare/publicWelfare",
"text": "公益",
"iconPath": "img/icon-publicwelfare.png",
"selectedIconPath": "img/icon-publicwelfare1.png"
},
{
"pagePath": "/pages/mine/mine",
"text": "我的",
"iconPath": "img/icon-mine.png",
"selectedIconPath": "img/icon-mine1.png"
}
]
}
},
editTabbar: function () {
//隐藏系统tabbar
wx.hideTabBar()
let tabbar = this.globalData.tabBar;
let currentPages = getCurrentPages();
let _this = currentPages[currentPages.length - 1];
let pagePath = _this.route;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for (let i in tabbar.list) {
tabbar.list[i].selected = false;
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
}
_this.setData({
tabbar: tabbar
});
},
此时组件所有的东西都已经准备好了,
你只需要在你需要调用这个tab的页面调用这个自定义组件就好了,
就是和平常的调用组件的写法一模一样
在你需要调用的wxml这样写
<tabbar tabbar="{{tabbar}}"></tabbar>
然后再对应页面的js中声明
const app = getApp();
onLoad: function(options) {
app.editTabbar();
},
``
调用app.js里面的`editTabbar方法,然后你就可以看到在你所需要的界面出现了这个自定义组件啦。别的页面需要引用也是如上方法,
-----2020-8-25补充
顶部导航栏(常规模式)
设置导航栏文字
在相应界面的json中加入属性、值:
“navigationBarTitleText”:“标题内容”,
“navigationBarTextStyle”:“white”
2.设置导航栏颜色
在相应界面的Json 文件中加入属性、值,值只能是十六进制的颜色。
“navigationBarBackgroundColor”:“十六进制颜色”
自定义导航栏(全屏模式)
1. 设置全屏模式
在json文件中加 “navigation"属性,值为:” custom";
“navigationStyle”: “custom”
2.自定义导航栏
在A.wxml文件中加入代码:
微信小程序
在A.wxss中加入:
.customTitleBar {
position:fixed;/出现滚动条的时候仍能保证标题在最上边/
z-index:10000;/让这个view浮在最上层/
color:white;/设置文字颜色/
text-align:center;/设置文字居中/
width:100%;/设置宽度为整个屏幕的宽度,配置text-align使用/
}
在A.js文件中加入:
data{
top: wx.getMenuButtonBoundingClientRect().top
}
底部导航栏
微信小程序 - 导航栏(顶部+底部+顶部全屏自定义)_第1张图片
1.添加底部导航栏
在app.json中添加代码:
“tabBar”:{
“selectedColor” : “#1296016”,
“list”:[
{
“pagePath” : “pages/index/index”,
“text” : “首页”,
“iconPath” : “/images/icon/home.png”,
“selectedIconPath” : “/images/icon/homeSelected.png”
},
{
“pagePath” : “pages/mine/mine”,
“text” : “我的”,
“iconPath” : “/images/icon/mine.png”,
“selectedIconPath” : “/images/icon/mineSelected.png”
}
]
}
代码中:
selectedColor设置的是选中之后的图标描述文字颜色;
iconPath的值不能为空;
2.导航栏界面之间的跳转
a)“首页”和“我的”之间的跳转时使用switchTab,使用navigateTo、navigateBack和redirectTo并不起作用;
b)从首页跳到“page1”(page1不是带有底部导航栏的页面),那么在page1界面要跳回到首页的话使用redirectTo和navigateTo是没用的,使用switchTab或者navigateBack(使用navigateBack的前提是从首页跳到page1用的是navigateTo)
wx.switchTab({
url:’…/page1/page1’
});
地址:https://www.it610.com/article/1280147377784635392.htm