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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
Mootools 1.2教程 函数
Sep 15 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
vue.js中npm安装教程图解
2018/04/10 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python的else子句使用指南
2016/02/27 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python3多线程操作简单示例
2018/05/22 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
本科生求职简历的自我评价
2013/10/21 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
起诉意见书范文
2015/05/19 职场文书
python基础详解之if循环语句
2021/04/24 Python
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
MySQL 计算连续登录天数
2022/05/11 MySQL