小程序开发——常用布局

小程序的布局分为两类：横向布局和纵向布局

• 横向布局
  从左到右
  如：
  .wxss文件

.rowLayout {
  display: flex;
  flex-direction: row;
}

.wxml (views是我在.json定义的数组，有四个元素)

效果图如下：

display: flex;这句的作用：当布局超过屏幕时（因为是横向布局，所以这里指屏幕的宽），平均分布，width这个属性设置更大的值的时候，都会无效。例如我把views这个数组改成只有两个元素，其他的都不变的时候，效果就变成了下图

• 纵向布局
  从上到下
  如：.wxss文件

.rowLayout {
  display: flex;
  flex-direction: column;
}

.wxml (views是我在.json定义的数组，有四个元素)

效果图如下：

下面再为大家介绍几种常用的布局效果

• 水平居中
  .rowcenter {
  justify-content: center;
  display: flex;
  }
• 垂直居中

 .columncenter {
  align-items: center;
  display: flex;
}

• 水平垂直居中

 .row-column-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

• 底部悬浮按钮

.bottom-button {
  position: fixed;
  bottom: 0;
  height: 45px;
  width: 100%;
}

• 左-中-右布局
  //首先，要一个view把左中右囊括起来
  .location {

 margin-left: 20px;
  margin-top: -70px;
  height: 100px;
  align-items: center; 
  display: flex;
}

//这是左边的样式

.location-left {
  margin-left: 5px;
  width: 60px;
}

//这是中间的样式

.location-center {
  flex: 1;
  margin-right: 0px;
  overflow: hidden; /*自动隐藏文字*/
  text-overflow: ellipsis; /*文字隐藏后添加省略号*/
  white-space: nowrap; /**强制不换行*/
}

//这是右边的样式

.location-right {
  padding-right: 5px;
}

• 文字省略

//注意：必须先确定左右的位置才有效果，如果右边的位置不确定（即长度未知），则会出现看不到的情况，虽然也是省略了，但看不到省略号
overflow: hidden; /*自动隐藏文字*/
  text-overflow: ellipsis; /*文字隐藏后添加省略号*/
  white-space: nowrap; /*强制不换行*/

• 覆盖层

position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 999999;/*保证覆盖层是最上层*/

• 横向滑动
  如下图，可以左右滑动
  

      
        {{item}}
      
    

有两个地方必须有： scroll-view 的 white-space: nowrap; 子控件 view 的 display:inline-block

• 标签自适应宽带
  如下图
  

  大气科学
  天气
  社会

注意点：要用一个大的标签包裹里面的小标签，并且大的标签要有 flex-wrap:wrap;

下一篇，将介绍小程序的页面跳转和传值。https://blog.csdn.net/liumude123/article/details/80041724