vue中列表数据按照A-Z首字母排列，点击定位到指定字母位置
核心代码如下<template><div class="hello" ><!-- <h1>{{ msg }}</h1> --><div class="parent"><div class="list" v-for="(item,index) in list1" :key="index" ><!-- {{ite
·
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).offsetTop
var box2 = document.getElementById('box2')
box2.scrollTop = aa
}
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)