vue多张图片实现长图组件
上一篇写了vue中如何实现长图效果，实现的是单张图片，本文讲解多张图片实现长图，直接上代码：
1.布局代码如下：
<template> <div class="scroll_long" ref="scroll_long" v-if="isVisible"> <div class="scroll_long_main"> <div class="scroll_long_pic" @layout="layout"> <img class="scroll_long_img" :src="scroll_long_1" postfix="jpg"/> <img class="scroll_long_img" :src="scroll_long_2" postfix="jpg"/> <img class="scroll_long_img" :src="scroll_long_3" postfix="jpg"/> <img class="scroll_long_img" :src="scroll_long_4" postfix="jpg"/> <img class="scroll_long_img" :src="scroll_long_5" postfix="jpg"/> <img class="scroll_long_img" :src="scroll_long_6" postfix="jpg"/> <img class="scroll_long_img" :src="scroll_long_7" postfix="jpg"/> <img class="scroll_long_img" :src="scroll_long_8" postfix="jpg"/> <img class="scroll_long_last_img" :src="scroll_long_9" postfix="jpg"/> </div> </div> </div> </template>
2.遥控器按键滑动事件和距离计算处理如下：
<script>
import {getApp, KeyEvent} from "@/util";
import {ESLaunchManager} from "@extscreen/es-core";
export default {
name: "scroll_long_img",
data(){
return {
isVisible: true,
offset: 0,
height: 0,
scrollEnded: false,
scroll_long_1:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/24/a1f5c7e1-ee55-4aef-bc79-0d4da89381b1.jpg',
scroll_long_2:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/24/2da44ac7-cb0d-42b2-9f1a-a32a57a73d16.jpg',
scroll_long_3:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/24/80d0f2a6-7a7a-41d7-a043-beeef4d366da.jpg',
scroll_long_4:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/24/159129f3-a254-45ea-bf6c-5edbeae25268.jpg',
scroll_long_5:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/24/8d1c2369-b667-45b1-b182-cffff31d7011.jpg',
scroll_long_6:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/24/d98f7378-37e5-4088-b7ed-76efee2096cd.jpg',
scroll_long_7:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/24/dd82b665-a03c-4c29-8155-4d9eda46f7fb.jpg',
scroll_long_8:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/24/27268dd4-93f8-428b-93ef-f23c360c7fff.jpg',
scroll_long_9:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/24/d0c4d39b-8025-464a-94d7-823bf572611b.jpg',
}
},
computed: {
scrollAllHeight() {
return this.height - 1080
}
},
mounted() {
this.app = getApp()
},
methods: {
show() {
this.isVisible = true
},
close() {
this.isVisible = false
},
isShow() {
return this.isVisible
},
scrollTo(offset) {
this.$refs.scroll_long.scrollTo(0, offset, true)
},
layout(e) {
this.height = e.height
},
onKeyDown(key) {
console.log('about-vip-----onKeyDown', key.keyCode)
if (key.keyCode === KeyEvent.down) {
if (this.offset < this.scrollAllHeight) {
this.offset += 100;
if (this.offset > this.scrollAllHeight) {
this.offset = this.scrollAllHeight
}
this.scrollTo(this.offset)
this.scrollEnded = false
} else {
this.scrollEnded = true
}
} else if (key.keyCode === KeyEvent.up) {
this.scrollEnded = false
if (this.offset > 0) {
if (this.offset >= 100) {
this.offset -= 100;
} else {
this.offset = 0
}
this.scrollTo(this.offset)
}
}
return true
},
onBackPressed() {
ESLaunchManager.finishESPage();
},
},
}
</script>
3.css样式代码：
style scoped>
.scroll_long {
width: 1920px;
height: 1080px;
position: absolute;
background-color: transparent;
overflow-y: scroll;
}
.scroll_long_img {
width: 1920px;
height: 1080px;
}
.scroll_long_last_img {
width: 1920px;
height: 1360px;
}
.scroll_long_pic {
background-color: transparent;
}
</style>
4.实现效果如下：
转载：https://blog.csdn.net/u012556114/article/details/127711705
查看评论