小程序开发——常用布局

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

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

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

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

<view class='rowLayout'>
  <block wx:for='{{views}}'>
  <view style='margin-left:5px;margin-right:5px;margin-top:5px;background-color:red; width:100px; height:40px'></view>
  </block>
</view>

效果图如下：

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

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

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

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

<view class='columnLayout'>
  <block wx:for='{{views}}'>
  <view style='margin-left:5px;margin-right:5px;margin-top:5px;background-color:red; width:100px; height:40px'></view>
  </block>
</view>

效果图如下：

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

• 水平居中

.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;/*保证覆盖层是最上层*/

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

<scroll-view  scroll-x style='white-space: nowrap;height:68rpx'>
      <block wx:for='{{tags}}' wx:key='tag'>
        <view style='margin-left:20rpx;height:68rpx;line-height:68rpx;display:inline-block' >{{item}}</view>
      </block>
    </scroll-view>

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

• 标签自适应宽度
  如下图
  

<view style='flex-wrap:wrap;display:flex;color:#5C5D5F;font-size:28rpx;flex-direction:row;'>
  <view style='margin-left:30rpx;margin-top:20rpx;height:60rpx;border-radius:8rpx;background-color:#F0F0F0;line-height:60rpx;padding-left:10rpx;padding-right:10rpx'>大气科学</view>
  <view style='margin-left:30rpx;margin-top:20rpx;height:60rpx;border-radius:8rpx;background-color:#F0F0F0;line-height:60rpx;padding-left:10rpx;padding-right:10rpx'>天气</view>
  <view style='margin-left:30rpx;margin-top:20rpx;height:60rpx;border-radius:8rpx;background-color:#F0F0F0;line-height:60rpx;padding-left:10rpx;padding-right:10rpx'>社会</view>
</view>

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

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

PS：摸鱼薅羊毛，真实有效