版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sanjan/article/details/80688825
微信布组件
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>