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

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

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

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

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

首页

列表页

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

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度，得到一个期望的直角，这种设计挺巧妙的，其中：

content需要给个空格

position设定为absolute是可选的，但.hd设定参照物为relative却是必须的

transform设定二选一，为了兼容，全给上，不过没涉及伸缩，我用了transform:rotate更直观，不用计算sin,cos

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。