小程序開發——常用佈局

小程序的佈局分爲兩類：橫向佈局和縱向佈局

• 橫向佈局
  從左到右
  如：
  .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