微信小程序01-布局

布局

Flex弹性布局

1. .container{
   display: flex;
   flex-direction: row;水平排布
   flex-direction: row-reverse;水平取倒叙排布
   flex-direction: column;垂直排布
   flex-direction: column-reverse;垂直倒序排布
   
   
   .container{
   display: flex;
   flex-direction: row;
   height: 400px;
   background-color: pink;
   justify-content: flex-start;左对齐
   justify-content: flex-end;左对齐
   justify-content: center;剧中
   justify-content: center;平均分布
   justify-content: space-around;等距分布
   主轴、交叉轴
   .container{
   display: flex;
   flex-direction: row;
   height: 400px;
   background-color: pink;
   justify-content: center;即在水平剧中，主轴上得对齐
   align-items: center；又在垂直剧中，交叉轴上得对齐
   }
   
   
   .container{
   display: flex;
   flex-direction: column;
   height: 400px;
   background-color: pink;
   justify-content: space-start;
   justify-content:space-evenly;平分间距
   align-items: center;
   align-items: baseline;view里文字下标对齐
   flex-wrap: nowrap;默认不换行
   flex-wrap: wrap;换行，当你得元素宽度大于屏幕宽度，默认不换行，换行后得下一个元素默认剧中
   align-content：center换行后的排列方式
   

    

2.  

 

条件渲染

if渲染
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block渲染
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

列表渲染 

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

 模板

定义模板

定义模板
<template name="msgItem">
</template>
使用模板
<template is="msgItem" data="{{...item}}"/>

点击事件-参数传递

<view class="article-group" wx:for="{{article}}" bindtap="onArticle" data-id="{{item.id}}">
{{item.name}}
</view>

事件冒泡：
bind 会冒泡
catch 不会冒泡

 w'xss细节；

.out-box{
  width: 100%;
  height: 100px;
  border-bottom : 1px #e4e4e4 solid;
  padding: 10px 10px;  边距
  box-sizing: border-box  边距生效
}