vuejs2.0制作最简单的顶部菜单滑动效果

此方法可适用于普通html页面，也可以是其他，使用相关css样式即可。
下面效果是横向滚动，也可以使用overflow-y: scroll; 修改为垂直滚动。

主要代码部分：

<template>
    <div class="allSort">
       <div class="sortMenu clearfix">
        <ul class="sortMenu-ul" >
          <li class="cell" v-for="item in sortMenu">
            <a href="">{{item.sortname}}</a>
          </li>
        </ul>
        <div class="all" v-on:click="subitemsExpanded=!subitemsExpanded">
          <img src="../../assets/pull-down.png" alt="">
        </div>
        <div v-show="subitemsExpanded" class="pull-down">
          <ul class="pull-down-sort">
            <li class="" v-for="pulldow in sortName">
              <a href="">{{pulldow.sortname}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

script部分：

<script> 
export default {
  name: 'allSort',
  data () {
    return {
      sortMenu: [
        { sortname: '全部' },
        { sortname: '家用电器' },
        { sortname: '大家电' },
        { sortname: '生活用品' },
        { sortname: '食品' },
        { sortname: '美妆' },
        { sortname: '书籍' },
        { sortname: '洗护用品' },
        { sortname: '母婴用品' },
        { sortname: '家居' }
      ],
      sortName: [
        { sortname: '家用电器' },
        { sortname: '母婴' },
        { sortname: '百货' },
        { sortname: '珠宝配饰' },
        { sortname: '运动户外' },
        { sortname: '食品' },
        { sortname: '美妆' },
        { sortname: '家装' },
        { sortname: '家居家纺' },
        { sortname: '鲜花宠物' },
        { sortname: '图书乐器' },
        { sortname: '生活服务' },
        { sortname: '游戏动漫' }
      ],
      subitemsExpanded: false
    }
  }
}
</script>  

css样式部分：

<style>
/* 分类菜单*/
.sortMenu{
  width: 100%; 
  background-color:#fff; 
  overflow-x: scroll; 
  -webkit-overflow-x: scroll;
}
.sortMenu::-webkit-scrollbar{ 
  width: 0; 
  height: 0;   
  background-color: #fff;  
}
.sortMenu-ul { 
  min-width:500px; 
  display: flex;
  justify-content: flex-start;
}
.sortMenu .cell{ 
  display: inline-block; 
  font-size: 12px;
  margin: 0px 1em;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: relative;
      text-overflow: ellipsis;
    word-break: keep-all;
}
.sortMenu .cell.special a{
  color: #ff474c;
}
.sortMenu .cell.special:before {
  content: '';
  height: 2px;
  width: 100%;
  background: #ff474c;
  position: absolute;
  bottom: 0px;
}
.sortMenu .all{
  right: 0;
  top: 0;
  height: 35px;
  width: 35px;
  position: absolute;
  background: #fff;
  z-index: 10;
  display: flex;
  justify-content:center;
  align-items:center;
}
.sortMenu .all:before{
  content: '';
  height: 25px;
  width: 1px;
  position: absolute;
  box-shadow: 1px 0px 1px #e0e0e0;
  left: 0px;
}
.sortMenu .all img{
  display: block;
  width: 16px;
}
.sortMenu .pull-down{
  position: absolute;
  top: 40px;
  height:auto;
  width: 100%;
  background: #fff;
  z-index: 1;
  border-top: 1px solid #f2f2f2;

}
.pull-down-sort{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: space-around;
  flex-wrap: wrap;
  flex-direction: row
}
.pull-down-sort li{
  float: left;
  padding: .1rem
}
.pull-down-sort li a:hover{
  color: #ff474c;
}
</style>

显示样式： 可在手机模式预览

选择下拉即可显示全部