微信小程序开发----界面样式

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

  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": "我的"
      }
    ]
  }