合作
咨询
帮助
微信定制咨询 
小程序开发自定义顶部菜单
- 作者：
- 发表时间：2019-09-18 10:51
- 来源：未知
有的时候小程序自带的底部菜单tabBar 不能满足我们的开发需求，这时候就需要使用自定义样式的底部菜单
操作如下
index.js代码如下
操作如下
1. 配置信息
在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
2. 添加 tabBar 代码文件
在代码根目录下添加入口文件:
3. 编写 tabBar 代码
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
index.js代码如下
Component({
data: {
selected: 0,
color: "#232323",
selectedColor: "#eb3d51",
"list": [
{
"pagePath": "/pages/index/index",
"iconPath": "/images/tabBar/icon_home.png",
"selectedIconPath": "/images/tabBar/icon_home_on.png",
"text": "首页"
},
{
"pagePath": "/pages/center/index",
"iconPath": "/images/tabBar/icon_ceter.png",
"selectedIconPath": "/images/tabBar/icon_ceter_on.png",
"text": "中心"
},
{
"pagePath": "/pages/community/index/index",
"iconPath": "/images/tabBar/icon_community.png",
"selectedIconPath": "/images/tabBar/icon_community_on.png",
"text": "社区"
},
{
"pagePath": "/pages/user/index",
"iconPath": "/images/tabBar/icon_my.png",
"selectedIconPath": "/images/tabBar/icon_my_on.png",
"text": "我的"
}
]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selected: data.index
})
}
}
})
index.wxml代码如下
index.wxml代码如下
<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>
index.wxss代码如下
index.wxss代码如下
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 118rpx;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color:#fff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
border-top: 1px solid #dcdcdc
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item cover-image {
width: 48rpx;
height: 48rpx;
margin-top: 10rpx;
}
.tab-bar-item cover-view {
font-size: 24rpx;
margin-top: 10rpx;
font-weight: 600
}
实现效果图
实现效果图
上一篇：没有了 下一篇：2019最新小程序授权登录解决代码