526互联

vue + 无限滚动不同高度

发布时间 2023-12-07 10:56:39作者: Jerrycoco
<div class="exbox" style="height:461px;overflow:auto" @mouseenter="handleMouseEnter()" @mouseleave="handleMouseLeave()">
              <div class="main rollul" ref="textList" id="caseDatasBox" v-if="caseData.length !== 0">
                <div @click="handleItem(index, item)" class="msg msgli" :class="itemIndex === index ? 'msg-active' : ''" v-for="(item, index) in caseData" :key="index">
                  <div class="content">
                    <div class="icon"><img style="height: 76px;" src="./images/load01.png" /></div>
                    <div class="info">
                      <div>
                        <div class="top-box">
                          <div class="err-name" :title="item.ERR_NAME - item.STAGE_CAUSE">
                            {{ item.ERR_NAME }}<span v-if="item.STAGE_CAUSE !== null">-</span>{{ item.STAGE_CAUSE }}</div>
                          <div style="margin-left: 10px;margin-top: -3px;"><el-rate v-model="item.CASE_RANK" disabled text-color="#ff9900"></el-rate></div>
                        </div>
                        <div class="bottom-box" :title="item.CASE_INTRODUCE">{{ item.CASE_INTRODUCE }}</div>
                      </div>
                    </div>
                    <div style="position: absolute;right: 32px;top: 8px;">
                      <span style="vertical-align: middle;"><img src="./images/qi.png" /></span>
                      <span>{{ item.ENTRY_NAME }}</span>
                    </div>
                    <div v-show="btnIndex !== 2" @click="handleCollect(item)" class="icon2"></div>
                  </div>
                </div>
              </div>
              <div class="no-data" v-if="caseData.length === 0">暂无数据</div>
            </div>
  data() {
    return {
       itemIndex： 0，
　　tomShow: false,
       times: null,
       caseData: [
        {
          ERR_NAME: '1电磁干扰',
          STAGE_CAUSE: '副标题',
          CASE_RANK: 4,
          CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。',
          ENTRY_NAME: '贡献人'
        },
        {
          ERR_NAME: '2电磁干扰',
          STAGE_CAUSE: '副标题',
          CASE_RANK: 4,
          CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。',
          ENTRY_NAME: '贡献人'
        },
        {
          ERR_NAME: '3电磁干扰',
          STAGE_CAUSE: '副标题',
          CASE_RANK: 4,
          CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频',
          ENTRY_NAME: '贡献人'
        },
        {
          ERR_NAME: '4电磁干扰',
          STAGE_CAUSE: '副标题',
          CASE_RANK: 4,
          CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。',
          ENTRY_NAME: '贡献人'
        },
        {
          ERR_NAME: '5电磁干扰',
          STAGE_CAUSE: '副标题',
          CASE_RANK: 4,
          CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。',
          ENTRY_NAME: '贡献人'
        },
        {
          ERR_NAME: '6电磁干扰',
          STAGE_CAUSE: '副标题',
          CASE_RANK: 4,
          CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,',
          ENTRY_NAME: '贡献人'
        },
        {
          ERR_NAME: '7电磁干扰',
          STAGE_CAUSE: '副标题',
          CASE_RANK: 4,
          CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。',
          ENTRY_NAME: '贡献人'
        },
        {
          ERR_NAME: '8电磁干扰',
          STAGE_CAUSE: '副标题',
          CASE_RANK: 4,
          CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,陕西省延安站数据正确率为88.65%,',
          ENTRY_NAME: '贡献人'
        }
      ],
　 }
 }
methods:{
   handleMouseEnter() {
      // 当鼠标悬停时触发的事件
      clearTimeout(this.timer)
    },
    handleMouseLeave() {
      // 当鼠标离开时触发的事件
      this.startPlay()
    },
    startPlay() { // 无限滚动
      const that = this
      clearInterval(that.timer)
      that.$nextTick(() => {
        that.timer = setInterval(() => {
          const textList = this.$refs.textList
          // 使用 CSS 过渡效果滚动
          textList.style.transition = 'transform 1s ease-in-out' // 增加过渡时间
          textList.style.transform = 'translateY(-39%)'
          setTimeout(() => {
            if (that.itemIndex <= 0) {
              that.itemIndex = that.caseData.length - 1
            } else {
              that.itemIndex--
            }
            // 将第一个元素移动到数组末尾
            const data = that.caseData[0]
            that.caseData.splice(0, 1)
            that.caseData.push(data)
            textList.style.transition = 'none'
            textList.style.transform = 'translateY(0)'
          }, 1000) // 增加定时器间隔时间，使滚动更慢
        }, 10000)
      })
    }
}
  watch: {
    tomShow: {
      handler() {
        const textList = this.$refs.textList
        textList.style.transition = 'none'
        textList.style.transform = 'translateY(0)'
      },
      deep: true
    }
  },
  mounted () {
   clearInterval(this.timer) // 鼠标移入清除定时器
    // this.tomShow = !this.tomShow  // 如有其他tab点击事件放在点击事件函数中
}
<style lang="stylus" scoped>
    .rollul{
       height:300px;
       position: relative;
     }
        .main {
          .msg {
            width: 731px;
            // height: 90px;
            background: url('./images/color01.png');
            margin-bottom: 25px;
            background: #012c5c;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            transition: top 0.5s ease;
            // border-bottom: 1px dashed #00ddfd;
            .content {
              display: flex;
              position: relative;

              .icon {
                width: 80px;
                display: flex;
                justify-content: center;
                align-items: center;
              }

              .info {
                max-width: 609px;
                font-size: 16px;
                margin-top: 10px;

                .top-box {
                  color: #0295d7;
                  // margin-bottom: 10px;
                  display: flex;

                  .err-name {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    max-width: 400px;
                    color: #00ddfd;
                  }
                }

                .bottom-box {
                  line-height: 18px;
                  max-width: 609px;
                  margin-top: 5px;
                  margin-bottom: 5px;
                  font-size:15px;
                  height:54px;
                }
              }

              .icon2 {
                width: 19px;
                height: 18px;
                background: url('./images/add.png');
                position: absolute;
                right: 5px;
                top: 6px;
              }
            }
          }

          .msg-active {
            background: url('./images/item-active.png');
            background-size: 100% 100%;
            transition: top 0.5s ease;
          }

          .msg:before {
            content: '';
            position: absolute;
            left: 0px;
            bottom: -15px;
            right: 0px;
            border-bottom: 1px dashed #00ddfd;
          }
        }
</style>