小程序weui的表单列表样式设计介绍
一、引入小程序weui css样式库，请参考第一章
二、在pages目录中新建目录preview以及文件preview.wxml，并添加如下代码
<view class="page"> <view class="page__hd"> <view class="page__title">Preview</view> <view class="page__desc">表单预览(www.vxzsk.com V型知识库原创)</view> </view> <view class="page__bd"> <view class="weui-form-preview"> <view class="weui-form-preview__hd"> <view class="weui-form-preview__item"> <view class="weui-form-preview__label">付款金额</view> <view class="weui-form-preview__value_in-hd">¥2400.00</view> </view> </view> <view class="weui-form-preview__bd"> <view class="weui-form-preview__item"> <view class="weui-form-preview__label">商品</view> <view class="weui-form-preview__value">电动打蛋机</view> </view> <view class="weui-form-preview__item"> <view class="weui-form-preview__label">标题标题</view> <view class="weui-form-preview__value">名字名字名字</view> </view> <view class="weui-form-preview__item"> <view class="weui-form-preview__label">标题标题</view> <view class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</view> </view> </view> <view class="weui-form-preview__ft"> <navigator url="" class="weui-form-preview__btn weui-form-preview__btn_primary" hover-class="weui-form-preview__btn_active">操作</navigator> </view> </view> <view class="weui-form-preview"> <view class="weui-form-preview__hd"> <view class="weui-form-preview__label">付款金额</view> <view class="weui-form-preview__value_in-hd">¥2400.00</view> </view> <view class="weui-form-preview__bd"> <view class="weui-form-preview__item"> <view class="weui-form-preview__label">商品</view> <view class="weui-form-preview__value">电动打蛋机</view> </view> <view class="weui-form-preview__item"> <view class="weui-form-preview__label">标题标题</view> <view class="weui-form-preview__value">名字名字名字</view> </view> <view class="weui-form-preview__item"> <view class="weui-form-preview__label">标题标题</view> <view class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</view> </view> </view> <view class="weui-form-preview__ft"> <navigator class="weui-form-preview__btn weui-form-preview__btn_default" hover-class="weui-form-preview__btn_active">辅助操作</navigator> <navigator class="weui-form-preview__btn weui-form-preview__btn_primary" hover-class="weui-form-preview__btn_active">操作</navigator> </view> </view> </view> </view><!--www.vxzsk.com V型知识库原创-->
三、在根目录app.json配置文件中配置preview文件路径，保存后会自动生成对应的js、css等文件
"pages/preview/preview",
四、preview.wxss样式代码
/* pages/preview/preview.wxss */
.weui-form-preview{
margin-bottom: 25px;
}五、预览效果
此文章本站原创，地址 https://www.vxzsk.com/1906.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：WeUI for 小程序panel面板
下一篇：web系统高可用性
^