⼩程序开发----界⾯样式
界⾯、图标位置 常⽤样式设置
1）⾏居中使得容器中的内容在该⾏中间
.top{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
2）按钮样式
⽐较常规，值得注意的就是这⾥直接⽤margin调节了按钮的位置，使得按钮在屏幕偏下⽅的位置（margin和padding参数顺序为上右下左）
.left{
float: left;
width: 35%;
height: 100rpx;
margin: 325rpx 0rpx 0rpx 0rpx;
color: black;
background-color: #339999;
border-radius: 40rpx;
}
.right{
float: right;
width: 35%;
height: 100rpx;
margin: 325rpx 0rpx 0rpx 0rpx;
color: black;
background-color: #339999;
border-radius: 40rpx;
}
3）容器内布局划分selectediconpath什么意思
这⾥的例⼦是⼀条订单，需要将其显⽰为三个⼩部分，效果图如下：
flex-direction: column;
align-items: left;
margin: 10rpx;
font-size: 30rpx;
font-weight: 400;
}
.mid{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
margin: 10rpx;
font-size: 40rpx;
font-weight: 400;
}
.right{
display: flex;
flex-direction: column;
align-items: right;
}
4）底部导航栏
⼩程序⾃带的地步导航栏，可以设置点击前后的图⽚以及新消息提⽰⼩红点等，⾮常⽅便。（⾮常好的⼩图标下载地址：www.iconfont/collections/detail?cid=29）
"selectedColor": "#a9b7b7",
"borderStyle": "#F6F7F7",
"backgroundColor":"#EEEEEE",
"list": [
{
"selectedIconPath": "pages/images/111.png",        "iconPath": "pages/images/1.png",
"pagePath": "pages/home/home",
"text": "⾸页"
},
{
"selectedIconPath": "pages/images/22.png",        "iconPath": "pages/images/2.png",
"pagePath": "pages/notification/notification",        "text": "消息"
},
{
"selectedIconPath": "pages/images/3333.png",        "iconPath": "pages/images/3.png",
"pagePath": "pages/me/me",
"text": "我的"
}
]
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。