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


Posted in Javascript onMay 14, 2019

今天写项目的时候遇到了歌手排序的问题,联想到了我们平时的手机通讯录侧栏字母排序,按照ABCDE这样的顺序对名字进行排序。

我们先来看看效果

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¬ice=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实现歌手列表字母排序下拉滚动条侧栏排序实时更新,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
vue实现动态按钮功能
May 13 #Javascript
详解小程序之简单登录注册表单验证
May 13 #Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 #Javascript
vue项目前端知识点整理【收藏】
May 13 #Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
You might like
Laravel实现批量更新多条数据
2020/04/06 PHP
PHP7 新增功能
2021/03/09 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python 字符串操作方法大全
2014/03/11 Python
在Python中使用第三方模块的教程
2015/04/27 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python @property装饰器原理解析
2020/01/22 Python
Python如何输出百分比
2020/07/31 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
JAVA代码查错题
2014/10/10 面试题
.NET面试10题
2014/02/24 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
经理岗位职责
2015/02/02 职场文书
前台文员岗位职责
2015/02/04 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
个人维稳承诺书
2015/05/04 职场文书
高一军训感想
2015/08/07 职场文书