前端数组中数据通过button按钮上一页下一页切换

xiaoming_0208

已于 2023-09-13 11:40:00 修改

阅读量185

点赞数

文章标签：前端 html javascript

于 2023-05-25 11:26:24 首次发布

本文链接：https://blog.csdn.net/xiaoming4965/article/details/130863577

版权

实现图效果

html代码

  <!-- 截屏 -->
          <div class="video-screenshot">
            <div class="screenshot-title"><span>实时告警截图</span> </div>
//页面切换部分
            <div class="screenshot-bottom" v-for="(item, index) in screenshotList"              :key="index"
              v-show="index === currentIndex">
              <div class="video-img">
                <img :src="item.imgList" alt="">
              </div>
              <div class="text">
                <div>告警名称:{{ item.name }}</div>
                <div>报警时间:{{ item.time }}</div>
                <div>报警地点:{{ item.adress }}</div>
              </div>
            </div>
            <!-- 提示文字区域 -->
            <!-- <div v-if="isLastImg" style="color: red;">当前最后条内容</div> -->
//切换按钮
            <div class="button">
              <button @click="prevContent" class="buttom">上一条</button>
              <button @click="nextContent">下一条</button>
            </div>
          </div>

最后一条提示（提示页面上）

  currentIndex: 0, // 当前显示的图片序号

效果图

  computed: {

    // 计算属性，用于判断当前是否是最后一张图片
    isLastImg() {
      return this.currentIndex === this.screenshotList.length - 1;
    },
  },

  // 切换到上一张图片
    prevContent() {
      this.currentIndex = Math.max(0, this.currentIndex - 1);
    },
    // 切换到下一张图片
    nextContent() {
      this.currentIndex = Math.min(this.screenshotList.length - 1, this.currentIndex + 1);
    },