小程序实战Flex布局(1)简单的列表样式

说明：

重点掌握Flex布局的基本知识==>详情看教程 Flex 布局教程:语法篇(阮一峰) - CSDN博客

效果：

image.png

tab_type.wxml

<!--navigator标签自带点击按压背景变色效果  -->
<view class='tab_container'>
 <view class='tab_header'>
 </view>

<view class='tab_content' class='tab_content'>
   <view class='nav-view-two'>
     <navigator url='../tab_one/tab_one' class='nav_one'>
        <text class='nav_text'>选项卡实现方式一</text>
        <view class='icon-arrow'></view>
     </navigator>
</view>

<view class='nav-view-two'>
  <navigator url='../tab_two/tab_two' class='nav_one'>
    <text class='nav_text'>选项卡实现方式二</text>
    <view class='icon-arrow'></view>
  </navigator>
</view>

<view class='nav-view-two'>
  <navigator url='../tab_two/tab_two' class='nav_one'>
    <text class='nav_text'>选项卡实现方式三</text>
    <view class='icon-arrow'></view>
  </navigator>
</view>

<view class='nav-view-two'>
  <navigator url='../tab_two/tab_two' class='nav_one'>
    <text class='nav_text'>选项卡实现方式四</text>
    <view class='icon-arrow'></view>
  </navigator>
</view>

<view class='nav-view-two'>
  <navigator url='../tab_two/tab_two' class='nav_one'>
    <text class='nav_text'>选项卡实现方式五</text>
    <view class='icon-arrow'></view>
  </navigator>
</view>
</view>

<view class='bottom'>
</view>
</view>

tab_type.wxss

  page {
    height: 100%;
  }

  .tab_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* .nav-view-one {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid gainsboro;
    margin: 1px;
  } */

  .nav-view-two {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid gainsboro;
    margin: 1px;
  }

  .tab_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .nav_one {
    padding: 10px;
    width: 100%;
    display: flex;
  }

  /* .nav_two {
    padding: 10px;
    width: 100%;
    position: relative;
    display: flex;
  } */

  .nav_text {
    flex: 1;
  }

  .icon-arrow:after {
    content: '';
    display: inline-block;
    align-items: center;
    justify-content: center;
    width: 7px;
    height: 7px;
    margin-right: 6rpx;
    border-width: 2px 2px 0 0;
    border-color: #c8c8cd;
    border-style: solid;
    transform: rotate(45deg);
  }