微信布局

微信布组件

WXML

整个页面布局样式

定义容器 container 确定整体是横向还是纵向

<view class="container">
</view>

标题命名

<view class='title'>
</view>

横向命名

<view class='row'>
</view>

纵向命名

<view class='col'>
</view>

文本命名

<textarea  class='text'>
</textarea>

底部命名

<view class='bottom'>
</view>

页脚命名

<view class='footer'>
</view>
 ```
输入框命名
```xml
<view class="input">
    <input bindfocus="bindfocus" bindblur='bindblur'  value="{{addinput}}" type="text" />
</view>




<div class="se-preview-section-delimiter"></div>

嵌套使用规范

通过上下命名连接的方式组成

页脚里面嵌套了input 、 send 、add

<!--提交框-->
<view  class="footer">
    <view  class="footinput">
        <view class="input"><input bindfocus="bindfocus" bindblur='bindblur'  value="{{addinput}}" type="text" /></view>
    </view>
    <view wx:if="{{sendflag}}" class="foodsend">
        <view class="send">发送</view>
    </view>
    <view wx:else class="footadd" bindtap="bindtapimg">
      <view class="addbroder">
          <image src="../../images/hotapp_add.png"/>
      </view>
    </view>
</view>




<div class="se-preview-section-delimiter"></div>

ul 和 li 嵌套实现横向等分添加 元素

wxml 布局

<view class="footaddbox">
      <ul>
         <li>
           <view class="footaddimg"><image src="../../images/hotapp_img.png"></image></view>
           <text>添加图片</text>
         </li>
          <li>
           <view class="footaddimg"><image src="../../images/hotapp_img.png"></image></view>
           <text>添加图片</text>
         </li>
          <li>
           <view class="footaddimg"><image src="../../images/hotapp_img.png"></image></view>
           <text>添加图片</text>
         </li>
      </ul>
  </view>




<div class="se-preview-section-delimiter"></div>

wxss 样式

.footaddbox{
  height: 200rpx;
}
.footaddbox ul{
  display: flex;
  height: 100%;
  flex-direction: row;
}
.footaddbox ul li{
  flex: 1;
  height: 100%;
  font-size: 12px;
  color: #9a9a9a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footaddimg{
  border: 1px solid #ccc;
  border-radius: 20rpx;
  margin: 10rpx;
  padding: 30rpx;
}




<div class="se-preview-section-delimiter"></div>

组件

wx:for

wx:key 设置成index 提高效率

<block wx:for="{{feedback}}" wx:key="index">
  <view>item</view>
  <view>index</view>
</block>




<div class="se-preview-section-delimiter"></div>

scroll-view

滑动到底监听 bindscrolltolower | 沿Y轴滑动 scroll-y

<scroll-view class="scrollview" scroll-y="true" bindscrolltolower="friendListsScrollHandler">
</scroll-view>




<div class="se-preview-section-delimiter"></div>

.scrollview {
 height: 100%;
}

template

定义

//addtell.wxml
<template name="addtell">
  <view>
   我是template
  </view>
</template>

引用

<import src="/template/addtell.wxml" />
<template is="addtell" data="{{...addtell}}" />

  data: {
    addtell: {
    },
  },

wx:if

 <view wx:if="{{sendflag}}" class="foodsend">
      <view class="send">发送</view>
    </view>
    <view wx:else class="footadd" bindtap="bindtapimg">
      <view class="addbroder">
        <image src="../../images/hotapp_add.png" />
      </view>
    </view>

hidden

  <view hidden="{{flag ? true : false}}">
  </view>

textarea

  <textarea  class='text' value="{{item.value.content}}" maxlength="5000" auto-height="true"
        placeholder-class="placeholder"
        name="content" focus="{{focus}}" auto-focus="true"  placeholder="点击添加文本"   />

form

<form bindsubmit="onSubmit">
<view class='bottom'>
        <button formType="submit" class='btn success'>保存</button>
    </view>

/**
   * 保存数据事件
    */
 onSubmit: function(event) {
 },

WXSS

page

page {
  height: 100%;
  width: 100%;
}

container

.container {
  height: 100%;
  width: 100%;
  flex-direction: column;
}

距离顶部绝对定位

  position: absolute;
  top:40rpx;

距离底部绝对定位

  position: absolute;
  bottom:40rpx;

距离左边绝对定位

  position: absolute;
  left:40rpx;

距离右边绝对定位

  position: absolute;
  right:40rpx;

设置阴影

box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.10), -10rpx 10rpx 20rpx rgba(0, 0, 0, 0.10);

设置圆角

border-radius: 40rpx;

设置边框线

 border: 4rpx solid #555;

设置背景颜色

 background-color: #cfcfcf;

设置容器中内容都居中对齐

 flex-flow:column nowrap;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100%;

单独设置下边框线

 border-bottom: 1px solid #f5f5f5;

设置文字居中

 width: 90%;
 text-align: center;
 height: 60rpx;
 font-size: 38rpx;

嵌套申明class

.row{
}
.row .text{
}

display flex 下设置等比填充

flex :1

.bottom{
    width: 100%;
    background: #fff;
    display: flex;
    flex-flow:row nowrap;
    justify-content: center;
    align-items: center;
}
.bottom .btn{
    flex: 1;
    line-height: 2;
    padding-top: 10rpx;//相对父组件上边缘距离
    padding-bottom: 10rpx;
    margin: 30rpx 30rpx;//left rigth
}
.btn.success{
    background: #1aad19;
    color: #fff;
}
.btn.del{
    background: #e64340;
    color: #fff;
}

<view class='bottom'>
         <button formType="submit" class='btn success'>保存</button>
        <button class='btn del' bindtap="onDelete">删除</button>
</view>