vue实现长图浏览组件----可以遥控器上下滑动适配各种机型
我是一个刚入门一个月vue的新手，做了7年Android开发，目前公司项目以vue和Android相结合进行开发，说实话这个需求原生实现很简单，vue真是折腾了半天，本来使用scrollview实现上下滑动，但是TV上还需要相应按键事件，所以这个功能只算实现一半，后来在前端大佬的指导下使用 overflow-y: scroll然后在遥控器上下按的时候滚动合适的距离来实现当vue组件宽度超过屏幕时可以正常滑动和显示。
1.直接上代码：
.scroll_long {
width: 1920px;
height: 1080px;
position: absolute;
background-color: transparent;
overflow-y: scroll;
align-items: center;
justify-content: center;
}
2.vue里面的布局代码：
<template>
<div class="scroll_long" ref="scroll_long" v-if="isVisible">
<div class="scroll_long_main">
<div class="scroll_long_pic" @layout="layout">
<tv_net_image class="scroll_long_last_img" :src="longImgData" />
</div>
</div>
</div>
</template>
3.vue各组件css代码如下：
<style scoped>
.scroll_long {
width: 1920px;
height: 1080px;
position: absolute;
background-color: transparent;
overflow-y: scroll;
align-items: center;
justify-content: center;
}
.scroll_long_img {
width: 1920px;
height: 1080px;
}
.scroll_long_last_img {
width: 900px;
height: 1200px;
align-items: center;
justify-content: center;
}
.scroll_long_pic {
background-color: transparent;
}
</style>
4.vue里面导包：
import {getApp, KeyEvent} from "@/util";//这是一个按键工具类
import {ESLaunchManager} from "@extscreen/es-core";//vue基础组件，基本上vue同学都知道
5.vue图片数据和实现按键上下滚动方法：
export default {
name: "scroll_long_img",
data(){
return {
isVisible: true,
offset: 0,
height: 0,
scrollEnded: false,
longImgData:'http://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/11/0c082268-7116-409d-921c-52029af46485.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('long_image-----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();
},
},
}
