Form（纯展示）
纯展示表单。Form UI 提供与WeLink规范一致的表单视图
效果示例
HTML
<div class="page" style="background: #eee;">
<div class="page__hd">
<h1 class="page__title">Form</h1>
<p class="page__desc">表单（纯展示）
</div>
<div class="page__bd">
<div class="weui-form_view">
<div class="weui-form_view-cell">
<div class="weui-form_view-cell__header">个人交养老险</div>
<div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-500.00</div>
</div>
<div class="weui-form_view-cell">
<div class="weui-form_view-cell__header">个人交医疗险</div>
<div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-200.00</div>
</div>
<div class="weui-form_view-cell">
<div class="weui-form_view-cell__header">个人交失业险</div>
<div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-168.34</div>
</div>
<div class="weui-form_view-cell">
<div class="weui-form_view-cell__header">个人交住房金</div>
<div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-252.50</div>
</div>
<div class="weui-form_view-cell">
<div class="weui-form_view-cell__header">扣个人所得税</div>
<div class="weui-form_view-cell__body weui-form_view-cell__align_rg">-1458.60</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell weui-form_view-cell__line">
<div class="weui-form_view-cell__header">纯展示标题</div>
<div class="weui-form_view-cell__body">文字数字左对齐</div>
</div>
<div class="weui-form_view-cell weui-form_view-cell__line">
<div class="weui-form_view-cell__header">纯展示</div>
<div class="weui-form_view-cell__body">文字数字左对齐</div>
</div>
<div class="weui-form_view-cell weui-form_view-cell__line">
<div class="weui-form_view-cell__header">纯展示</div>
<div class="weui-form_view-cell__body">文字数字左对齐</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell__verticality">
<div class="weui-form_view-cell__header">上下接口的纯展示</div>
<div class="weui-form_view-cell__body">文字数字左对齐</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell__verticality">
<div class="weui-form_view-cell__header">
文案太多最对显示三行
</div>
<div class="weui-form_view-cell__body">
<div class="weui-form_view-cell__access_text weui-form_view-cell__body-content_trigger">
文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
</div>
<div class="weui-form_view-cell__body-btn">展开</div>
</div>
</div>
<div class="weui-form_view-cell">
<div class="weui-form_view-cell__header">
文案太多最对显示三行
</div>
<div class="weui-form_view-cell__body">
<div class="weui-form_view-cell__access_text">
文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
</div>
<div class="weui-form_view-cell__body-btn">收起</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.weui-form_view-cell__body-btn').on('click',function () {
var text = $(this).html();
if(text === '展开'){
$(this).parent().find('.weui-form_view-cell__access_text').removeClass('weui-form_view-cell__body-content_trigger');
$(this).html('收起');
} else {
$(this).parent().find('.weui-form_view-cell__access_text').addClass('weui-form_view-cell__body-content_trigger');
$(this).html('展开');
}
});
});
</script>