<div id="app">
<div class="contacts" ref="contacts">
<template v-for="item in contactsFilter">
<div class="title" :ref="`position-${item.key}`">{{item.key}}</div>
<div class="contact" v-for="contact in item.lists">{{contact}}</div>
</template>
</div>
<div :class="'quick-position' + (isPositionOnTouch ? ' active' : '')" @touchstart.prevent="onPositionTouchstart" @touchmove.prevent="onPositionTouchmove" @touchend.prevent="onPositionTouchend" ref="position">
<span v-for="item in contacts">{{item.key}}</span>
</div>
</div>body {
margin: 0;
background-color: #fff;
}
#app {
.contacts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: scroll;
.title {
padding: 10px;
background-color: #eee;
font-size: 18px;
}
.contact {
padding: 10px;
border-bottom: 1px solid #eee;
}
}
.quick-position {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 25px;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: #fff;
border-left: 1px solid #eee;
&.active {
background-color: #eee;
box-shadow: 0, 0, 3px, 0, #ccc;
}
span {
text-align: center;
}
}
}
var app = new Vue({
el: "#app",
data: {
isPositionOnTouch: false,
contacts: [
{ key: "A", lists: ["阿良", "阿珂", "阿里"] },
{ key: "B", lists: ["阿良", "阿珂"] },
{ key: "C", lists: ["阿良"] },
{ key: "D", lists: ["阿良", "阿珂", "阿里"] },
{ key: "E", lists: ["阿良"] },
{ key: "F", lists: ["阿良", "阿珂"] },
{ key: "G", lists: ["阿良", "阿珂", "阿里"] },
{ key: "H", lists: ["阿良"] },
{ key: "I", lists: [] },
{ key: "J", lists: ["阿良", "阿珂", "阿里"] },
{ key: "K", lists: ["阿良", "阿珂"] },
{ key: "L", lists: ["阿良", "阿珂", "阿里"] },
{ key: "M", lists: ["阿里"] },
{ key: "N", lists: ["阿珂"] },
{ key: "O", lists: [] },
{ key: "P", lists: ["阿良", "阿里"] },
{ key: "Q", lists: ["阿良", "阿珂", "阿里"] },
{ key: "R", lists: ["阿良"] },
{ key: "S", lists: ["阿良", "阿珂", "阿里"] },
{ key: "T", lists: ["阿里"] },
{ key: "U", lists: ["阿良", "阿珂", "阿里"] },
{ key: "V", lists: [] },
{ key: "W", lists: ["阿良", "阿里"] },
{ key: "X", lists: ["阿良", "阿珂", "阿里"] },
{ key: "Y", lists: ["阿良", "阿珂"] },
{ key: "Z", lists: ["阿良"] }
]
},
computed: {
contactsFilter() {
let filter = [];
this.contacts.map(item => {
if (item.lists.length != 0) {
filter.push(item);
}
});
return filter;
}
},
methods: {
onPositionTouchstart(event) {
this.isPositionOnTouch = true;
this.onSetPosition(event.changedTouches[0].clientY);
},
onPositionTouchmove(event) {
this.onSetPosition(event.changedTouches[0].clientY);
},
onPositionTouchend() {
this.isPositionOnTouch = false;
},
onSetPosition(y) {
let index = Math.floor(
y / (this.$refs["position"].clientHeight / this.contacts.length)
);
if (this.$refs["position-" + this.contacts[index].key]) {
this.$refs["contacts"].scrollTop = Math.ceil(
this.$refs["position-" + this.contacts[index].key][0].offsetTop
);
}
}
}
});
External CSS
This Pen doesn't use any external CSS resources.