【VUE】微商城（七）----实现分类页面功能

1、分类页面的基本布局

1）、分类页面左侧一级分类布局

1、找到CategoryView.vue页面，编写js代码，发送请求获取分类数据

2、左侧一级菜单页面结构

3、左侧一级菜单CSS样式代码

<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 40px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  .menu-left {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;
    .menu-item {
      height: 54px;
      width: 100%;
      .text {
        width: 100%;
        line-height: 54px;
        margin-bottom: 0;
      }
    }
    .current {
      width: 100%;
      background: #fff;
      .text {
        color: red;
      }
    }
  }
  .menu-right {
    flex: 1;
    background: #fff;
  }
}
</style>

观察效果：

4、一级分类点击样式改变

2）、二级分类展示

1、页面结构

2、CSS样式代码

.cate {
      height: 100%;
      .cate-title {
        margin: 0;
        text-align: left;
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding: 10px;
      }
      .cate-item {
        padding: 7px 10px 10px;
        display: flex;
        overflow: hidden;
        flex-flow: row wrap;
        li {
          width: 33.3%;
          .cate-item-wrapper {
            .cate-item-img {
              width: 100%;
              img {
                width: 70px;
                height: 70px;
              }
            }
            span {
              display: inline-block;
              font-size: 14px;
              color: #333;
            }
          }
        }
      }
    }

效果：

3）、使用better-scroll实现滚动效果

1、命令行进入项目根目录运行以下命令安装better-scroll插件

cnpm install better-scroll@1.15.2

2、进入CategoryView.vue导入better-scroll 使用

2、实现一级分类二级分类之间的联动效果

1）、点击一级分类，二级分类跟着跳转

2）、滚动二级分类，切换对应的一级分类