本章节介绍微信weui基础组件中的Preview表单预览，按照下面的步骤就可以做出网页效果，案例中引用的微信weui的css样式库我已经上传到百度网盘了，地址 http://pan.baidu.com/s/1cvQlLc ，大家可以下载下来进行引用，当然你也可以引用网络地址，但是有个弊端，微信weui的样式库更新比较频繁，可能将来某一天会失效，所以最好下载到本地使用。
一，引入css文件
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
记得html设置成移动手机端浏览
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
二、Preview表单预览html代码
在<body></body>之间添加如下代码
<div class="page preview js_show"> <div class="page__hd"> <h1 class="page__title">Preview</h1> <p class="page__desc">表单预览---V型知识库原创www.vxzsk.com</p> </div> <div class="page__bd"> <div class="weui-form-preview"> <div class="weui-form-preview__hd"> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">付款金额</label> <em class="weui-form-preview__value">¥2400.00</em> </div> </div> <div class="weui-form-preview__bd"> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">商品</label> <span class="weui-form-preview__value">电动打蛋机</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">名字名字名字</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span> </div> </div> <div class="weui-form-preview__ft"> <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</a> </div> </div> <br> <div class="weui-form-preview"> <div class="weui-form-preview__hd"> <label class="weui-form-preview__label">付款金额</label> <em class="weui-form-preview__value">¥2400.00</em> </div> <div class="weui-form-preview__bd"> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">商品</label> <span class="weui-form-preview__value">电动打蛋机</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">名字名字名字</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span> </div> </div> <div class="weui-form-preview__ft"> <a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:">辅助操作</a> <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</button> </div> </div> </div> <div class="page__ft j_bottom"> <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a> </div> </div>
三、效果
打开谷歌浏览器，设置手机网页模式浏览案例网页
如上图所示，在这里我们模拟的是苹果6PLUS下的效果。
四、完整html代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>www.vxzsk.comV型知识库</title> </head> <link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css"> <body> <div class="page preview js_show"> <div class="page__hd"> <h1 class="page__title">Preview</h1> <p class="page__desc">表单预览---V型知识库原创www.vxzsk.com</p> </div> <div class="page__bd"> <div class="weui-form-preview"> <div class="weui-form-preview__hd"> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">付款金额</label> <em class="weui-form-preview__value">¥2400.00</em> </div> </div> <div class="weui-form-preview__bd"> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">商品</label> <span class="weui-form-preview__value">电动打蛋机</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">名字名字名字</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span> </div> </div> <div class="weui-form-preview__ft"> <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</a> </div> </div> <br> <div class="weui-form-preview"> <div class="weui-form-preview__hd"> <label class="weui-form-preview__label">付款金额</label> <em class="weui-form-preview__value">¥2400.00</em> </div> <div class="weui-form-preview__bd"> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">商品</label> <span class="weui-form-preview__value">电动打蛋机</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">名字名字名字</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label">标题标题</label> <span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span> </div> </div> <div class="weui-form-preview__ft"> <a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:">辅助操作</a> <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</button> </div> </div> </div> <div class="page__ft j_bottom"> <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a> </div> </div> </body> </html>
此文章本站原创，地址 https://www.vxzsk.com/896.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：Spark reduceByKey
下一篇：SparK RDD持久化
^