在制作小程序时怎么在底部设置三个按钮
时间: 2024-05-08 22:20:07 浏览: 26
您好,关于在小程序底部设置三个按钮的问题,您可以使用微信小程序官方提供的 tabbar 组件来实现。具体操作步骤如下:
1. 在 app.json 文件中设置 tabbar 和相关页面路径
```
{
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/tabbar/home.png",
"selectedIconPath": "images/tabbar/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "images/tabbar/message.png",
"selectedIconPath": "images/tabbar/message-active.png"
},
{
"pagePath": "pages/personal/personal",
"text": "我的",
"iconPath": "images/tabbar/personal.png",
"selectedIconPath": "images/tabbar/personal-active.png"
}
]
}
}
```
2. 在要设置底部按钮的页面中设置 navigationBarTitle 和 tabBar 属性
```
Page({
data: {
// ...
},
onLoad: function (options) {
// 修改页面标题
wx.setNavigationBarTitle({
title: '首页'
})
},
onShow: function () {
// 显示 tabbar
wx.showTabBar({
animation: true
})
},
onHide: function () {
// 隐藏 tabbar
wx.hideTabBar({
animation: true
})
}
})
```
3. 在 wxml 文件中添加 tabbar 组件
```
<tabbar></tabbar>
```
以上就是在小程序底部设置三个按钮的基本操作。希望对您有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)