小程序 - 底部导航栏“tabBar”

时间：2024-02-15 22:50:37

小程序底部导航

1、app.json页面配置：

{
    "pages": [
        "pages/movie/movie",
        "pages/cinema/cinema",
        "pages/find/find",
        "pages/me/me"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#D35E37",
        "navigationBarTitleText": "电影",
        "navigationBarTextStyle": "white"
    },
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/movie/movie",
                "iconPath":"images/bar/movie-0.jpg",
                "selectedIconPath":"images/bar/movie-1.jpg",
                "text": "电影"
            },
            {
                "pagePath": "pages/cinema/cinema",
                "iconPath": "images/bar/cinema-0.jpg",
                "selectedIconPath": "images/bar/cinema-1.jpg",
                "text": "影院"
            },
            {
                "pagePath": "pages/find/find",
                "iconPath": "images/bar/find-0.jpg",
                "selectedIconPath": "images/bar/find-1.jpg",
                "text": "发现"
            },
            {
                "pagePath": "pages/me/me",
                "iconPath": "images/bar/me-0.jpg",
                "selectedIconPath": "images/bar/me-1.jpg",
                "text": "我的"
            }
        ]
    }
}

　　pages数组下配置指定路径的小程序页面文件，点击保存时每个单独的路径会单独生成一个指定名字的文件夹，文件夹下包含四种类型的文件，分别为：以.js结尾的负责逻辑的js文件，以.json结尾的负责页面信息配置的json文件，以.wxml结尾的负责小程序页面的wxml页面文件，以.wxss结尾的负责页面样式的wxss文件。

　　window对象下的属性主要用于配置全局页面头部的属性以及相关样式的设置。

　　tabBar对象下的list主要负责页面底部导航栏的配置，包含路有跳转的路径配置，以及图标和文字的是否选中的样式配置。

2、app.wxss全局页面的样式配置

/**app.wxss**/

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200rpx 0;
    box-sizing: border-box;
}

text {
    display: block;
    text-align: center;
    color: red;
}

　　该文件配置的属性，对当前项目的所有页面样式都起作用。

此次主要是配置一个微信小程序页面的底部tab切换栏，第一项默认是选中效果，微信小程序与普通的html有很多相似的地方，掌握好前端的HTML+CSS+JavaScript，有一定的基础，相信学起来小程序也是很容易的。

相关文章