使用tabs组件-swipeable 给标签栏增加手势功能 & vueloader-CSS深度作用选择器/deep/ & 三横汉堡菜单应用-::before伪元素设置样式

tab标签页组件-标签栏滚动模式：https://youzan.github.io/vant/#/zh-CN/tab

基础结构：src/views/home/index.vue

// swipeable 给标签栏增加手势功能
<van-tabs swipeable>
  <van-tab :key="index" v-for="index in 8" :title="'标签 ' + index">
      <！--需要滚动条将来实现阅读记忆功能-->
    <div class="scroll-wrapper">
     <van-cell-group>
         <van-cell v-for="item in 20" :key="item">{{index}}</van-cell>
      </van-cell-group>
     </div>
  </van-tab>
</van-tabs>
    // 三横  汉堡菜单
<span class="bar_btn" slot="nav-right">
  <van-icon name="wap-nav"></van-icon>
</span>

设置样式：

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 /deep/ 或 ::v-deep 操作符

vueloader - Scoped CSS深度作用选择器：

https://vue-loader.vuejs.org/zh/guide/scoped-css.html#深度作用选择器

<style scoped lang='less'>
//style标签上scoped属性：让样式在当前组件下生效，子级组件内不能失效
//.vue 中的style标签是vue-loader解析   /deep/  覆盖子组件的样式
.van-tabs {
  height: 100%;
  display: flex;
    //灵活的项目将垂直显示，正如一个列一样。
  flex-direction: column;
    //  /deep/  深度
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #3296fa;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content{
      //flex: 1——实现中间空间不足以容纳那么多内容时，会自动向下填充，并且下面的内容也会自动下移
    flex: 1;
      // overflow: hidden——裁剪内容 - 不提供滚动机制
    overflow: hidden;
  }
  /deep/ .van-tab__pane{
    height: 100%;
    .scroll-wrapper{
      height: 100%;
        //auto  裁剪内容 - 提供滚动机制
      overflow-y: auto;
    }
  }
}
//汉堡菜单样式
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    box-shadow: 0 0 10px #999;
    transform: scale(1, 0.6);
  }
  .van-icon-wap-nav {
    width: 100%;
    height: 100%;
    background: #fff;
    text-align: center;
    line-height: 35px;
    position: relative;
    z-index: 1000;
    &::before {
      font-size: 20px;
    }
  }
}

• /deep/ 作用：让样式在其他组件生效。
• 保证 scroll-wrapper 容器能够生成滚动条，将来需要使用滚动。
  • 下拉刷新
  • 上拉加载
  • 记录浏览位置

知识点：

伪元素：

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

content属性:

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。