<template>
<div class="mysingers">
<!-- <h1>这是歌手歌手界面</h1>
"
-->
<ScrollView ref="singersw" class="arlistView">
<ul class="ulist">
<li v-for="(val, index) in keys" :key="index" :class="val" class="item">
<h2>{{ val }}</h2>
<ul>
<li
v-for="(item, i) in arList[index].data.artists"
:key="i"
class="everyList"
>
<img v-lazy="item.img1v1Url" alt="" />
{{ item.name }}
</li>
</ul>
</li>
</ul>
</ScrollView>
<ul class="keylist">
<li
v-for="(val, index) in keys"
:key="index"
:class="{ active: cln == index }"
@click="changview(val)"
>
{{ val }}
</li>
</ul>
</div>
</template>
<script>
import { getAllArtist, getAllArtistssss } from "../api/index";
import ScrollView from "../components/ScrollView.vue";
// scrolling
export default {
name: "MySingers",
components: {
ScrollView,
},
data() {
return {
keys: [],
arList: [],
cln: 0,
topgroup: [],
};
},
created() {
// let obj = await getAllArtist(); async
// console.log("created", obj);
getAllArtistssss().then((res) => {
this.keys = res.keys;
this.arList = res.list;
});
},
mounted() {
this.$refs.singersw.scrolling((y) => {
// console.log(y);
this.keys.forEach((v, i) => {
// console.log();
let cstr = `li.${v}`;
let ltop = document.querySelector(cstr).offsetTop;
// let aatop = this.$refs.singersw.$el.offsetHeight;
// this.topgroup.push(obj);
if (ltop <= -y + 200) {
this.cln = i;
}
});
});
},
methods: {
changview(val) {
let cstr = `li.${val}`;
let ltop = document.querySelector(cstr).offsetTop;
this.$refs.singersw.scrollTo(0, -ltop, 200);
},
},
};
</script>
<style scoped lang="scss">
@import "../assets/css/mixin.scss";
.arlistView {
position: fixed;
top: 180px;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.mysingers {
position: relative;
font-size: 30px;
h2 {
margin-left: 10px;
margin-right: 10px;
font-size: 40px;
font-weight: 700;
// widows: 90%;
// background-color: red;
@include bgColor();
}
.everyList {
height: 100px;
width: 100%;
border-bottom: 1px solid #ccc;
padding-left: 10px;
display: flex;
align-items: center;
img {
width: 60px;
height: 60px;
border-radius: 30px;
margin-right: 20px;
}
}
}
.keylist {
position: absolute;
top: 30px;
left: 90%;
font-size: 30px;
font-weight: 700;
li {
margin-top: 10px;
text-align: center;
&.active {
color: red;
font-size: 40px;
}
}
}
.ulist {
.item:last-child {
padding-bottom: 150%;
// height: 100%;
}
}
</style>
|
