vue中列表数据按照A-Z首字母排列，点击定位到指定字母位置

demo的效果如下

核心代码如下
第一种方式如果是vue中路由采用hash方式，跳转会有问题（会报404），可以往下看第二种方式

<template><div class="hello" ><!-- <h1>{{ msg }}</h1> --><div class="parent"><div class="list" v-for="(item,index) in list1" :key="index" ><!-- {{item.tag}} --><a class="list-item" v-for="(item2,index2) in item.data" :key="index2" :name="item.tag" >{{item2.Fsinger_name}}</a></div><div class="right"><a class="righta" :href="'#'+item1" v-for="(item1,index) in listforgirht" :key="index">{{item1}}</a></div></div></div>
</template><script>
export default {name: 'HelloWorld',data () {return {msg: '市场洞察-品牌',items: ['阿迪达斯', '耐克', '彪马', '新百伦', '李宁', '安踏', '鸿星尔克'],list1: [{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: `奥巴里`},{Fsinger_name: `阿依莲`},{Fsinger_name: `A_LIN`},{Fsinger_name: `ANU`},{Fsinger_name: `AVIVA`}]},{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`},{Fsinger_name: `BY2`},{Fsinger_name: `BEYOUBD`},{Fsinger_name: `BTS`},{Fsinger_name: `BLUE`}]},{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: `蔡依林`}, {Fsinger_name: `CG`},{Fsinger_name: `CHEN`},{Fsinger_name: `CZRtoon`},{Fsinger_name: `Chatli`}]},{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: `邓紫棋`}, {Fsinger_name: `DJsanmek`},{Fsinger_name: `邓丽君`},{Fsinger_name: `Danko`},{Fsinger_name: `Deepchill`}]},{tag: `E`,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: `饿了么`}, {Fsinger_name: `EXO`},{Fsinger_name: `Eric`},{Fsinger_name: `二手玫瑰乐队`},{Fsinger_name: `二哈乐队`}]},{tag: `F`,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: `冯绍峰`}, {Fsinger_name: `F4`},{Fsinger_name: `冯提莫`},{Fsinger_name: `冯艺术`}, {Fsinger_name: `方大同`}]},{tag: `G`,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: `G.E.M`}, {Fsinger_name: `GALA`},{Fsinger_name: `G-dragon`},{Fsinger_name: `GAI周岩`}, {Fsinger_name: `光良`}]}],list: ['a', 'b', 'c', 'd', 'e', 'f'],listforgirht: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>a {/* color: #42b983; */
}
.list{width: 456px;background: #42b983;margin-bottom: 20px;}
.hello{position: relative;}
.parent{width: 553px;height: 681px;top: 300px;left: 0;right: 0;bottom: 0;margin: auto;overflow: auto;position: absolute;}
.right{width: 14px;height: 572px;position: absolute;right: 30px;top: 83px;}
.righta{display: block;padding: 2px;}
</style>

里面比较巧妙的就是通过锚点实现定位到具体的位置
还有第二种实现方式：比较通用的，当点击右侧A-Z的字母的时候，传id到点击事件，然后循环的时候设置组建的id为A-Z，做到一一对应，通过：

<div v-if="item.openDialog" id="box2" class="parent"><div class="top-title">{{ item.name +'-' +item.permissionRespDtoList[1].tag }}</div>//绑定相应的id<div v-for="(itembrand,index1) in item.permissionRespDtoList[1].nameDtoList" :id="itembrand.initial" :key="index1" class="list"><a v-for="(item2,index2) in itembrand.nameList" :key="index2" class="list-item">{{ item2 }}</a></div><div class="right"><div v-for="(item1,index3) in listforgirht" :key="index3" class="righta" @click="scrolltoinsdent(item1)">{{ item1 }}</div></div></div>先得到点击对应元素距离父元素的距离，  通过scrolltop移动相应的距离来实现scrolltoinsdent (item) {var aa = document.getElementById(item).offsetTopvar box2 = document.getElementById('box2')box2.scrollTop = aa}

vue中列表数据按照A-Z首字母排列，点击定位到指定字母位置相关推荐

在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
vue中data数据之间如何赋值
vue中data数据之间如何赋值前言实现方式前言最近我妹突然问我vue的data之间需要进行赋值,这是什么奇葩需求,干嘛不直接自己定义好就好了啊,既然有这种场景,那么我们就需要去解决这种场景. ...
Vue学习：Vue中的数据代理
一.回顾Object.defineProperty Object.defineProperty方法可以用来增加和修改对象的属性,该方法有三个参数: 1.属性所在的对象: 2.属性的名字: 3.一个描述 ...
Vue中的数据代理与数据劫持
数据代理数据代理字面上是通过一个对象代理对另一个对象属性的操作在vue中的数据代理,实际上是通过vm上的属性代理对_data中属性的操作数据劫持数据劫持也可称作数据代理,字面上是劫持到某个属性 ...
mysql杠杆加号什么意思_对tb_book表中的数据,按ID序号进行升序排列,查询语句是什么?_学小易找答案...
[单选题]修改数据库表结构用以下哪一项 ( ) [单选题]对于一个微小物理量,通常采用将其进行放大的方法实现测量,以下哪个不是物理实验方法? [单选题]扭摆实验中,为了测出金属匀质细杆绕质心对称轴的转 ...
vue点击定位到指定位置_vue页面内部定位到锚点位置
上个文章写了跨页面的锚点定位,锚点的页面是在mounted里调用的定位到锚点位置,只有新打开此页面时才会执行mounted,所以当前页面内进行点击定位到锚点位置不起作用,解决方法在main.js里的w ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
Vue中使用数据可视化Echarts图表展示
目录 Echarts--商业级数据图表 Echarts支持的图表 Echarts的使用方法 Echarts--商业级数据图表商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览 ...
vue中实现跳转链接并拼接参数（点击跳转或者判断返回请求数据跳转）
vue中实现跳转链接(点击跳转或者判断返回请求数据跳转) <div @click="toRescue">标题:window.location.href跳转到外部链接测试 ...

vue中列表数据按照A-Z首字母排列，点击定位到指定字母位置

vue中列表数据按照A-Z首字母排列，点击定位到指定字母位置相关推荐

最新文章

热门文章