小程序--实现细线边框

效果图

 

首先尝试一下传统方式实现边框

<view class="page-warpper" style="height:{{view.pageHeight-view.tabBarHeight}}rpx;">

 <header title="花开等你来" align="left"></header>

<view class="slider">

<image src="/asserts/images/index-1.png"></image>

</view>

<view class="index-nav">

<navigator class="nav-item">

  <image src="/asserts/images/Home_icon_Hotel@2x.png"></image>

  <text>美食</text>

</navigator>

<navigator class="nav-item">

  <image src="/asserts/images/Home_icon_Introduction@2x.png"></image>

  <text>住宿</text>

</navigator>

<navigator class="nav-item">

  <image src="/asserts/images/Home_icon_Complaint@2x.png"></image>

  <text>玩乐</text>

</navigator>

<navigator class="nav-item">

  <image src="/asserts/images/Home_icon_foot@2x.png"></image>

  <text>周边游</text>

</navigator>

</view>

</view>

 

wxss文件：

.slider image{

  width: 100%;

  height: 440rpx;

}

.index-nav{

  display: flex;//弹性布局

  flex-wrap: wrap;//放不下的放到下一行

}

.index-nav  .nav-item{

  width: 33.3%;

  height: 200rpx;

  border-right: 1rpx solid #ccc;

  border-bottom: 1rpx solid #ccc;

  display: flex;  //flex布局为默认横向排列元素

  box-sizing: border-box; 

  flex-direction: column;//设置flex布局纵向排列元素(从左到右为交叉轴，从上到下为主轴)

  justify-content: center;//元素在主轴上的对齐方式

  align-items: center;//元素在交叉轴上的对齐方式

}

.index-nav  .nav-item :nth-child(3n){

  border-right: 0 none;

}

.index-nav image{

  width:80rpx ;

  height: 80rpx;

}

如果没有  box-sizing: border-box;显示效果就会变成这样

实际上每一行是有点放不下的，因为这种方式的边框占据了实体位置

换一种方式，通过伪元素实现

.slider image{

  width: 100%;

  height: 440rpx;

}

.index-nav{

  display: flex;

  flex-wrap: wrap;

}

.index-nav .nav-item{

  display: flex;

  flex-direction: column;

  width: 33.3333%;

  height: 200rpx;

  justify-content: center;

  align-items: center;

  box-sizing: border-box;

  border-bottom: 1rpx solid #f00;

  position: relative; 

}

 

.index-nav .nav-item::after{

  content: '';

  width:1rpx;

  height:100%;

  position:absolute;

  top:0rpx;

  right:0rpx;

  background-color:#f00;

}

 

.index-nav .nav-item:nth-child(3n)::after{

  width: 0rpx;

}

.index-nav image{

  width:80rpx ;

  height: 80rpx;

}

由于分辨率太高（1920*1080），会出现一条边显示不出来的情况，用手机调试就可以看清楚效果了