微信小程序中解决边框问题——伪元素

在开发中市场需要用一条分割线来隔开模块，使得页面看起来具有层次感，比如下面这样：

九宫格

我们可以看到在模块之间加了一些分割线，在微信小程序开发中有个border属性可以设置四周边框，但这样设置边框并达不到我们需要的效果，先看看通过border属性设置效果：

通过border属性设置的效果

可以看出，我们想要的九宫格变成了这样的，border属性是给每一个模块都设置上了四周的边框，这样模块之间共同的边看起来就要比其他边要粗一点，不协调，所以这种方法是不可取的。
这里我们可以通过伪元素+定位的方法来处理这种情况，直接贴上代码：

.bdr{
  position: relative
}

.bdr::after{
  /* 内容为空 */
  content: "";
  /* 设置宽度为1rpx */
  width: 1rpx;
  /* 高度为所在父元素的高度 */
  height: 100%;
  /* 设置背景色 */
  background-color: #ddd;
  /* 设置位置为绝对 */
  position: absolute;
  /* 距离父元素右边为0 */
  right: 0;
  /* 距离父元素上边为0 */
  top: 0;
}

在class名称后面加上::after或者::before就表示在此处创建一个
伪元素，在其后的括号中定义伪元素的一些属性，来看看伪元素实现的效果：

在右边添加一个伪元素
从图中可以看到，在每个格子的右边有了一条分割线，最后再在父元素中加上一条属性border-bottom，这样底部也就有一条线了，就达到了我文章最开始的那种九宫格效果了。

最后贴上index.wxml和index.wxss的代码：
index.wxml代码：

<view class="index-nav">
  <navigator class="nav-item bdr">
    <text>模块一</text>
  </navigator>
  <navigator class="nav-item bdr">
    <text>模块二</text>
  </navigator>
  <navigator class="nav-item bdr">
    <text>模块三</text>
  </navigator>
  <navigator class="nav-item bdr">
    <text>模块四</text>
  </navigator>
  <navigator class="nav-item bdr">
    <text>模块五</text>
  </navigator>
  <navigator class="nav-item bdr">
    <text>模块六</text>
  </navigator>
  <navigator class="nav-item bdr">
    <text>模块七</text>
  </navigator>
  <navigator class="nav-item bdr">
    <text>模块八</text>
  </navigator>
  <navigator class="nav-item bdr">
    <text>模块九</text>
  </navigator>
</view>

index.wxss代码:

.index-nav{
  display: flex;
  flex-wrap: wrap;
}

.index-nav .nav-item{
  width: 33.33333%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  border-bottom: 1rpx solid #ddd;
}

.bdr{
  position: relative
}
/* 伪元素 */
.bdr::after{
  /* 内容为空 */
  content: "";
  /* 设置宽度为1rpx */
  width: 1rpx;
  /* 高度为所在父元素的高度 */
  height: 100%;
  /* 设置背景色 */
  background-color: #ddd;
  /* 设置位置为绝对 */
  position: absolute;
  /* 距离父元素右边为0 */
  right: 0;
  /* 距离父元素上边为0 */
  top: 0;
}

总结：微信小程序中通过伪元素实现的这种布局效果有点像Android中的RelativeLayout布局，两个元素可以理解成是分层排列的，伪元素相当于是在父元素的上面那一层显示，不会跟父元素抢位置；而用border实现的效果跟Android里的LinearLayout布局差不多，他们之间是并列在一层上排布的，分割线也会占用布局上的位置，所以就出现了第二张图那种效果。这就是我对伪元素初次使用的一个理解，有不妥的地方希望大佬能指正。谢谢。