vue多张图片实现TV端长图浏览组件

淡淡的香烟

已于 2022-11-12 21:26:20 修改

阅读量1.6k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-11-06 01:19:40 首次发布

本文链接：https://blog.csdn.net/u012556114/article/details/127711705

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>