<template>
<div class="content" ref="con">
<img ref="dd" class="directory_bg" src="../../static/image/directory/directory_bg.png" />
<scroll-view class="directory_list" scroll-y @scroll='soll'>
<view class="" v-for="(item,index) in 82" :key="index" style="height: 100px;">
{{item}}--{{index}}
</view>
</scroll-view>
</div>
</template>
<script>
export default {
data(){
return {
imgH:0,
listH: 0,
conH: 0
}
},
onReady() {
this.getInfo()
},
mounted(){
this.conH = this.$refs.con.offsetHeight;
},
methods:{
soll(event){
console.log(event)
if(!this.imgH && this.$refs.dd.offsetHeight) {
this.imgH = this.$refs.dd.offsetHeight - this.conH;
}
event.preventDefault()
const {scrollHeight, deltaY, scrollTop} = event.detail;
this.$refs.dd.style.marginTop = -(scrollTop * (this.imgH / (scrollHeight - this.$refs.con.offsetHeight))) +'px'
},
getInfo(){
}
}
}
</script>
<style lang='less' scoped>
.content{
height: 100vh;
overflow: hidden;
.directory_bg{
margin-top: 0;
width: 100%;
transition: .1s;
}
.directory_list{
position: absolute;
z-index: 1;
top: 0;
height: 100%;
}
}
</style>