微信公众号开发-WEUI

分割线，:after/:before

cell里面下面或者上面会有分割线，weui用:after以及:before实现的

请看weui.css。

还有一种实现方式-hr

<hr style="margin-left: 15px;background-color: #e5e5e5;height: 1px;border: none;">

1. 颜色不能用color要用background-color。
2. 左右的空隙要用margin-left/right，不能用padding-left/right。
3. 一定要有height，不然不显示。
4. 默认有边框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。