本文主要是介绍微信公众号开发-WEUI，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
分割线，:after/:before
cell里面下面或者上面会有分割线，weui用:after以及:before实现的
请看weui.css。
还有一种实现方式-hr
<hr style="margin-left: 15px;background-color: #e5e5e5;height: 1px;border: none;">- 颜色不能用color要用background-color。
- 左右的空隙要用margin-left/right，不能用padding-left/right。
- 一定要有height，不然不显示。
- 默认有边框border,要去掉边框，使用border:none。
有一种场景是cell输入下面要加上错误提示语，这种情况下要去掉cell的分割线，同时给最外层加上下面或者上面的分割线，cell与分割线要垂直分布。
可以考虑一下实现方式，最外层div：
<div><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label"><span style="color: red">*</span>姓名</label></div><div class="weui-cell__bd"><input class="weui-input" type="text" placeholder="请输入姓名" style="text-align: end" /></div></div><div style="display: block"><span style="color: red;font-size: .8rem;padding-left: 15px;">请输入姓名，提示语</span></div><hr style="margin-left: 15px;background-color: #e5e5e5;height: 1px;border: none;"></div>通过display: block一级display: none控制提示语的展示与隐藏。
使用hr实现分割线的过程中出现了height:1px，但是实际不显示问题。分割线的解决方案：
http://ju.outofmemory.cn/entry/47000
最后使用3实现。
3. 用border-top:1px solid #ff0000边框的方法制作一个细线.
<style typestyle type="text/css">
.a{
border-top:1px solid #ff0000;
}
</style>
<DIV class="a"></DIV><div style=" border-top: 1px solid #e5e5e5;color: #b94a4a;margin-left: 16px;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);"></div>其中后面4条使分割线更细，借鉴weui的用法。
选择器：datePicker/picker
在html里面：
<div class="weui-cell nodivider"><div class="weui-cell__hd"><label class="weui-label"><span style="color: red">*</span>出生日期</label></div><div class="weui-cell__bd" @click="onDatePick" style="padding:0.5rem 1rem;"><div class="weui-cell_select" style="margin-top:0rem;text-align: end"><input v-cloak id="born" placeholder="请选择出生日期" class="weui-input" style="text-align: right;" /></div></div></div>可以用input，也可以用p(weui的demo里面就是用的p)，但是个人认为input方便些，因为可以设置placeholder，校验方便。
在js里面：（不过这里dateformat貌似没起作用）
onDatePick() {weui.datePicker({dateFormat: "yy-mm-dd",start: 2010, // 起始时间end: new Date(), // 结束时间defaultValue: [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()],onChange: function(result) {},onConfirm: function(result) {$("#born").val(result[0] + "-" + result[1] + "-" + result[2]);}});},datePicker不好用，当时间日期可选的数据太大的时候，弹出很慢，后来用iosSelect替换，效果快很多，但是没有做响应的动画效果，渐渐弹出的动画需要研究。
picker
onPick() {weui.picker(code, {onChange: function(result) {},onConfirm: function(result) {$("#input").val(code[result].label);}});},注意这里的result是code列表中，对象的value，而code[index]取值，是按照列表的排列顺序0，1，2，3索引取的，所以建议value都是自然顺序，同时用key标志value对应的id。
这篇关于微信公众号开发-WEUI的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
