界面、图标位置 常用样式设置

  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）容器内布局划分

这里的例子是一条订单，需要将其显示为三个小部分，效果图如下：

.orderleft{display: flex;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）底部导航栏

小程序自带的地步导航栏，可以设置点击前后的图片以及新消息提示小红点等，非常方便。

（非常好的小图标下载地址：http://www.iconfont.cn/collections/detail?cid=29）

"tabBar": {"color": "black","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": "我的"}]}