使用vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新的示例

小编给大家分享一下使用vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新的示例，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为昆山企业提供专业的网站制作、做网站，昆山网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

我们先来看看效果

那就用vue来实现一遍

首先新建一个vue页面，取名为helloworld.vue

在页面里写入内容

.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;
}

我是使用的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实现歌手列表字母排序下拉滚动条侧栏排序实时更新的示例”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！