在components下新建一个文件夹tabbarConponent，在里面创建四个文件分别是tabbar.js、tabbar.json、tabbar.wxml和tabbar.wxss。
wxml中：对底部导航栏进行基本布局
{{item.text}}
{{item.text}}
<ol start="3">
json中：设置为组件
{
"component": true,"usingComponents": {}
}
wxss中：设置底部导航栏的基本样式以及兼容iphoneX及更高版本的样式
.tabbar_box{
font-size: 22rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 98rpx;
box-shadow: 0 0 16px 2px rgba(199,199,0.40);
}
.tabbar_box.iphoneX-height{
padding-bottom: 68rpx;
}
.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: 68rpx;
}
.tabbar_nav{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
}
.tabbar_icon,.special-text-wrapper{
width: 40rpx;
height: 40rpx;
margin-bottom:10rpx
}
.special-wrapper{
position: absolute;
left: 77rpx;
top: -45rpx;
width: 106rpx;
height: 106rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
background-color: #fff;
text-align: center;
box-sizing: border-box;
padding: 8rpx;
}
.special-wrapper .tabbar_icon{
width: 90rpx;
height: 90rpx;
}
<ol start="5">
js中：底部导航
// tabBarComponent/tabBar.js
import wepy from 'wepy';
Component({
/**
- 组件的属性列表
*/
properties: {
tabbar: {
type: Object,value: {
'backgroundColor': '#ffffff','color': '#979795','selectedColor': '#1c1c1b','list': [
{
'pagePath': 'pages/index/index','iconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/home_def@2x.png','selectedIconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/home_sel@2x.png','text': '首页'
},{
'pagePath': 'pages/assemble/assemble','iconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/fabu@2x.png','isSpecial': true,'text': '发布拼团'
},{
'pagePath': 'pages/user/user','iconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/my_def@2x.png','selectedIconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/my_sel@2x.png','text': '我的'
}
]
}
},showOrHide: {
type: Boolean,value: true
}
},/**
- 组件的初始数据
*/
data: {
isIphoneX: wepy.$instance.globalData.systemInfo.model.toLowerCase().includes('iPhone X'.toLowerCase())
},/**
- 组件的方法列表
*/
methods: {
navTo(e) {
wepy.switchTab({
url: e.currentTarget.dataset.url,success(e) {
console.log(e);
},fail(e) {
console.log(e,'err');
}
});
}
},onLoad(){
}
});
<ol start="6">
在app.wepy中获取移动端设备信息：
getSystemInfo() {
let self = this;
wepy.getSystemInfo({
success: function (res) {
self.globalData.systemInfo = res;
console.log(res,res.model.toLowerCase().includes('iPhone X'.toLowerCase()));
self.globalData.isIphoneX = res.model.toLowerCase().includes('iPhone X'.toLowerCase())
}
});
}
然后在需要底部导航栏的页面中引入即可。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
