使用vue實現歌手列表字母排序下拉滾動條側欄排序實時更新的示例

小編給大家分享一下使用vue實現歌手列表字母排序下拉滾動條側欄排序實時更新的示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

我們先來看看效果

那就用vue來實現一遍

首先新建一個vue頁面，取名為helloworld.vue

在頁面里寫入內容

<template>
 <div class="hello">
 <div class="singer" id="singer">
  <div class="singer-top-tag">{{singerTopTag | filterSingerTag}}</div>
  <ul class="singer-ul">
  <li v-for="(item, index) in list" :key="index" class="singer-ul-li">
   <div class="singer-tag" :id="item.tag">{{item.tag | filterSingerTag}}</div>
   <ul>
   <li v-for="(fitem, findex) in item.data" :key="findex">
    <img :src="`https://y.gtimg.cn/music/photo_new/T001R300x300M000${fitem.Fsinger_mid}.jpg?max_age=2592000`">
    <div>{{fitem.Fsinger_name}}</div>
   </li>
   </ul>
  </li>
  </ul>
 </div>
 <div class="sort">
  <ul>
  <li 
  v-for="(item, index) in sortList" 
  :key="index" 
  @click="jumpTag(item)"
  :class="{current:currentSort == item ? true : false}"
  >
   {{item == `hot` ? `熱` : item}}
  </li>
  </ul>
 </div>
 </div>
</template>

<script>
import axios from 'axios'
export default {
 name: "HelloWorld",
 data() {
 return {
  list:[], // 歌手列表
  sortList:[], // 側欄排序列表
  currentSort: 'hot', // 當前排序的標簽
  singerTopTag: 'hot', // 歌手欄頭部的標簽名字
 };
 },
 mounted() {
 this.testData()
 // 監聽滾動條
 window.addEventListener('scroll', this.handleScroll)
 },
 destroyed () {
 // 頁面摧毀的時候要關閉監聽 
 window.removeEventListener('scroll', this.handleScroll)
 },
 methods: {
 handleScroll () {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  let offsetTop = 0
  this.list.forEach((item,index) => {
  // 獲取每個排序標簽的位置
  offsetTop = document.querySelectorAll('.singer-ul-li')[index].offsetTop
  // 當前滾動條的位置 和 當前的標簽偏移頂部的距離進行對比
  // 每一個歌手的li標簽的高度必須要保持一致，我這里的高度是70，可以計算自己項目的內容的具體高度進行修改
  if (scrollTop > offsetTop && scrollTop < (offsetTop+ 70*item.data.length)) {
   this.singerTopTag = item.tag
   this.currentSort = item.tag
  }
  })
 },
 // 請求數據
 testData(){
  axios.get(`https://c.y.qq.com/v8/fcg-bin/v8.fcg?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8&notice=0&format=jsonp&channel=singer&page=list&key=all_all_all&pagesize=100&pagenum=1&hostUin=0&needNewCode=0&platform=yqq&jsonpCallback=jp1`)
  .then(res => {
  res = res.data.substring(5,res.data.length-1)
  res = JSON.parse(res).data.list
  res = res.sort((a,b) => a.Findex.localeCompare(b.Findex))
  res.forEach((item,index) => {
   //　添加側欄排序
   item.Findex = item.Findex == 9 ? 'hot' : item.Findex
   this.sortList.push(item.Findex)
  })
  // 去除重復
  this.sortList = new Set(this.sortList)
  this.sortList = [...this.sortList]
  // 添加排序標簽和歌手列表
  this.sortList.forEach(e => {
   this.list.push({
   tag:e,
   data:res.filter(i => i.Findex ==e)
   })
  })
  })
 },
 // 跳轉標簽
 jumpTag(i){
  this.singerTopTag = i
  this.currentSort = i
  document.querySelector(`#${i}`).scrollIntoView()
 }
 },
 filters :{
 filterSingerTag(i) {
  return i == `hot` ? `熱門` : i
 }
 }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
 position: relative;
 background-color: #222;
}

.singer {
 position: relative;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: #222;
}

.singer-top-tag {
 position: fixed;
 top: 0px;
 left: 0;
 width: 100%;
 height: 30px;
 line-height: 30px;
 padding-left: 20px;
 font-size: 12px;
 color: hsla(0,0%,100%,.5);
 background: #333;
}

.singer-tag {
 width: 100%;
 height: 30px;
 margin-bottom: 20px;
 line-height: 30px;
 padding-left: 20px;
 font-size: 12px;
 color: hsla(0,0%,100%,.5);
 background: #333;
}

.singer-ul-li ul li {
 list-style-type: none;
 display: flex;
 justify-content: flex-start;
 align-items: center;
 padding: 0 0 20px 20px;
 color: rgba(255, 255, 255, .5);
}

.singer-ul-li ul li img {
 border-radius: 50%;
 widows: 50px;
 height: 50px;
}

.singer-ul-li ul li div {
 padding-left: 20px;
}

.sort {
 position: fixed;
 z-index: 30;
 right: 0;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 width: 20px;
 padding: 20px 0;
 border-radius: 10px;
 text-align: center;
 background: rgba(0,0,0,.3);
 font-family: Helvetica;
}

ul {
 margin: 0;
 padding: 0;
}

.sort ul{
 color: rgba(255,255,255,.6);
}

.sort ul li {
 list-style-type: none;
 padding: 3px;
 line-height: 1;
 font-size: 12px;
}

.current {
 color: #ffcd32;
}
</style>

我是使用的qq音樂接口，獲取的數據需要進行處理，如果覺得麻煩可以自己寫靜態數據來代替

數據的格式

const list = [
 {
  tag:`A`,
  data:[
   {
    img:`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
    Fsinger_name:`奧巴里`
  }
  ]
 }，
 {
  tag:`B`,
  data:[
   {
    img:`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
    Fsinger_name:`BIGBANG`
  }
  ]
 },
 {
  tag:`C`,
  data:[
   {
    img:`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
    Fsinger_name:`蔡依林`
  }
  ]
 },
 {
  tag:`D`,
  data:[
   {
    img:`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
    Fsinger_name:`鄧紫棋`
  }
  ]
 },
]

再者還要注意頁面的img標簽，直接復制上面的數據的話要對img標簽進行修改，去掉http那一串，直接用:src="item.img"代替

const list = [
 {
  tag:`A`,
  data:[
   {
    img:`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
    Fsinger_name:`奧巴里`
  }
  ]
 }，
 {
  tag:`B`,
  data:[
   {
    img:`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
    Fsinger_name:`BIGBANG`
  }
  ]
 },
 {
  tag:`C`,
  data:[
   {
    img:`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
    Fsinger_name:`蔡依林`
  }
  ]
 },
 {
  tag:`D`,
  data:[
   {
    img:`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
    Fsinger_name:`鄧紫棋`
  }
  ]
 },
]

看完了這篇文章，相信你對“使用vue實現歌手列表字母排序下拉滾動條側欄排序實時更新的示例”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！