微信小程序
请简单创建一个页面结构，要求页面结构根据不同屏幕手机大小进行自适应。
<!--pages/test/test.wxml-->
<view class="tab"> 顶部区域 </view> <view class="content"> 内容区域 </view> <view class="player"> 底部区域 </view>
/* pages/test/test.wxss */
page {
display: flex;
flex-direction: column;
background: #17181a;
color: #ccc;
height: 100%;
}
.tab {
display: flex;
background-color:red;
}
.content {
flex: 1;
background-color:green;
}
.player {
background: #222;
border-top: 1px solid #252525;
height: 112rpx;
}
底部标签
(1) 在app.json中创建页面
"pages":[
"pages/index/index",
"pages/index1/index1",
"pages/message/message",
"pages/contact/contact",
"pages/logs/logs"
],
(2) 添加到tabBar(最多5个)
pagePath:页面地址
text:底部导航栏名称
iconPath:页面图标
selectedIconPath:点击选中时的页面图标
"tabBar": {
"list":[
{
"pagePath": "pages/index/index1",
"text":"首页",
"iconPath": "/pages/images/首页.png",
"selectedIconPath": "/pages/images/首页1.png"
},
{
"pagePath":"pages/message/message",
"text":"消息",
"iconPath": "/pages/images/消息.png",
"selectedIconPath": "/pages/images/消息 1.png"
},
{
"pagePath":"pages/contact/contact",
"text":"联系",
"iconPath": "/pages/images/联系.png",
"selectedIconPath": "/pages/images/联系1.png"
}
]
},