手写一个翻页功能

放学别走啊

于 2023-09-15 10:02:11 发布

阅读量208

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_46113850/article/details/132895732

版权

vue 同时被 2 个专栏收录

52 篇文章

订阅专栏

3 篇文章

订阅专栏

文章讲述了在Vue项目中对接海康摄像头时，如何编写翻页功能，包括使用`onNext`方法控制图片切换和动态加载视频列表的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在对接海康摄像头，需要写一个翻页得功能，于是乎就想到了手写，然后就记录一下。在vue项目里写的

 <img
   :src="require('')"
   alt=""
   @click="onNext('delete')"
 />
 <img
   :src="require('')"
   alt=""
   @click="onNext('add')"
 />

iDIndex: 0,

onNext(type) {
  /**
   * console.log('getIChannelID', this.getIChannelID);
   * getIChannelID（所有硬盘录像机得通道号）
   */
  if (type === "add") {
    this.iDIndex++;
  } else {
    if (this.iDIndex == 0) {
      return;
    }
    this.iDIndex--;
  }

  WebVideoCtrl.I_StopAllPlay();
  this.$nextTick(() => {
    const total = this.page * this.page; //窗口数量
    let numWindow = total * this.iDIndex; //当前窗口第几页
    const length = total * (this.iDIndex + 1); // 当前页到下一页得数量
    let index = total * this.iDIndex;
    console.log(
      "total:",
      total,
      "numWindow",
      numWindow,
      "length:",
      length,
      "index:",
      index
    );
    for (numWindow; numWindow < length; numWindow++) {
      if (this.groupVideoList.length > numWindow) {
        this.clickStartRealPlay(
          this.groupVideoList[numWindow].webChannel,
          numWindow - index,
          this.groupVideoList[numWindow].webUserId
        );
      }
    }
  });
},