重磅来袭，微信小程序开发是否遇到难题？--细边框,细边框

重磅来袭，微信小程序开发是否遇到难题？--细边框,细边框

如果你问我现在做微信小程序开发还有没有机会的话，我可以明确的告诉你，有的，绝对有的，还有很多Bug没解决。

随着项目功能开发的逐渐增加，遇到的问题也逐渐增加，今天咱不说三国(好像跟三国也没多大关系)，就说下细边框问题。

如果你不是追求完美的程序员，请绕路，无须往下看，如果是，你仔细比较一下左右两张图中的分割线有什么不同？--没错，小程序官方组件展示中的分割线(边框)要比微信的粗很多，就算是闭着眼睛也是能看出来的。

 

为了解决以上问题，我可是费了九牛二虎之力的，倒不是说实现有多难，而是网上找不到完美的答案。可能是我笨的原因，用搜索搜到的广告竟然比答案要多得多。

好了，我就不卖关子了，直接上程序员最喜欢的内容，千万不要误会，我说的不是美女图，而是源代码来的。

微信样式表文件Index.wxss中的源代码如下：

Page {

  background-color: #ededed;

}

 

.outer {

  display: flex;

  flex-direction: column;

  background-color: #fff;

  margin-top: 50px;

  padding-left: 16px;

  color: #353535;

  height: 140px;

}

 

.inner {

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  align-items: center;

  height: 46px;

}

 

.line {

  position: relative;

  width: 100%;

}

 

.line:after {

  content: " ";

  position: absolute;

  left: 0;

  right: 0;

  height: 1px;

}

 

.line:after {

  box-sizing: border-box;

  transform: scaleY(0.5);

  transform-origin: 0 0;

  top: 0;

  border-top: 1px solid rgba(0, 0, 0, 0.2);

}

 

微信标记语言文件index.wxml中的文件内容如下：

<view class="outer">

  <view class="inner">中间油条分割线,你看得见么?</view>

  <view class="line" />

  <view class="inner">如果看不见，那就用放大镜瞧.</view>

  <view class="line" />

  <view class="inner">没有放大镜的话，就用显微镜.</view>

</view>

<view class="outer">

  <view class="inner">中间油条分割线,你看得见么?</view>

  <view class="line" />

  <view class="inner">如果看不见，那就用放大镜瞧.</view>

  <view class="line" />

  <view class="inner">没有放大镜的话，就用显微镜.</view>

</view>

 

改进后的效果给你look 一 look。如果有时间的话，可以下载小程序官方组件展示的源代码，你会发现weui.wxss中，是没有对边框进行处理的，把我上面的代码补充到weui.wxss里面去就好了。记得除了after，还得有before哦。