偷师成功，纯CSS绘制右箭头及其他——灵动外卖开发笔记

一、image标签无中生有的边距

对于高度过低（经过测验，这个min高度值在iP5下是14px，iP6下是16px，iP6 Plus下是18px）的<image />自带上边距，在wxml面板下查看padding/margin却没有什么异样，索性手动给了margin-bottom: 32rpx;才解决。

也不知道这个是不是小程序的bug，完成后商品列表后如下图

二、小程序为ListView画一个右箭头

首页 列表页

无意间看到weapp官方的demo里不是用png也不是用image data实现了，更不是canvas，细看真是纯css画的。

参考了https://github.com/weui/weui-wxss/中文件./style/weui.wxss

content:" ";
display:inline-block;
height:6px;
width:6px;
border-width:2px 2px 0 0;
border-color:#c8c8cd;
border-style:solid;
-webkit-transform:matrix(.71,.71,-.71,.71,0,0);
transform:matrix(.71,.71,-.71,.71,0,0);
position:relative;
top:-2px;
position:absolute;
top:50%;
margin-top:-4px;
right:2px;

我作了删改如下：

.hd:after {
    content: " ";
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #fff;
    border-style: solid;
    transform:rotate(45deg);
    position: absolute;
    margin-top: -4px;
    top: 50%;
    right: 22px;
}

原理是给个矩形，border-width绘制右边距、上边距，并旋转0.71弧度即45度，得到一个期望的直角，这种设计挺巧妙的，其中：

1. content需要给个空格
2. position设定为absolute是可选的，但.hd设定参照物为relative却是必须的
3. transform设定二选一，为了兼容，全给上，不过没涉及伸缩，我用了transform:rotate更直观，不用计算sin,cos
4. top为50%自适应更好

三、伪类:before/:after的其他用法

比如：单元格行前的竖杠、人民币符号、为container底部边框或边距等。

使用伪类，可以使得样式更加简洁，可读性也还好。

高亮标识.png

/*分类文本高亮左侧标识*/
.category-item-active:before {
    content: "";
    width: 3px;
    background: #0099ff;
}

按上面的代码，就有一竖条了。

人民币符号.png

/*人民币符号*/
.price:before {
    content: "￥";
}

.amount:before {
    content: "待支付 ￥";
}

四、flex值定义比重

我用它在了ListView中一行三列的布局，还可以用在照片预览器九宫格布局

这样就可以定义某一个子元素的权重，如果只定义一个子元素为flex: 1，那么其他的被挤压到最边上，如果有2个子元素，分别定义了flex: 1，那么它们各占50%。

以下示例定义了1、9布局。

/*配送费*/
.express-label {
    /*width: 90%;*/
    margin-left: 10px;
    flex: 9;
}

.express-fee {
    /*width: 10%;*/
    margin-right: 5px;
    flex: 1;
}

在这种场景下，与使用width百分比，效果是相等的。

源码下载：关注公众号【黄秀杰】，回复112。