微信小程序用iView weapp中input组件border-bottom不见之解决方案

在微信小程序开发工具中使用 iView weapp 这个UI 组件库时我们常常会用到它的 input 输入框组件，但是实际开发过程中我们会发现输入框下方的的 border-bottom 有些不可见

通过分析其 css 样式可知，它的 border-bottom 是组件内部 class 为 “i-cell i-input" 的伪元素 after 定义的。

在 css 的样式中，伪元素 after 定义了一个和父元素大小两倍缩放一半带有下边框的块，这个块绝对定位于父元素 top 为 0 的位置。如果边框没有显示出来，是不是可能在渲染的过程中因为1px像素的问题被遮盖了呢？尝试修改父元素的 class 样式中的 padding 发现一个有趣的现象。

原本的 css 样式是看不到伪元素的设置的 border-bottom

当我们将这个样式的 padding 中上下内距改成双数之后下边框就可见了

关于下边距不可见，可以通过设置伪元素绝对定位的位置，top往上提 1px 的距离，然后设置 1px 的间距，基本就不会发生下边距被遮盖的情况了

.i-cell: : after{
	top: -1px;
	margin-top: 1px;
}

有些实际情况是加了 margin-top 1px 的间距之后反而看不见了 border-bottom，这种情况下可以不用加这个间距，就直接设置绝对定位 top 的值为 -1px，因为这个伪元素的 pointer-events 的值设为 none 了
需要注意的是，这个不要在 app.wxss 里加，请加在所引用的组件里。