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>

顯示樣式： 可在手機模式預覽

選擇下拉便可顯示所有