滚动列表

 

 

<template>
  <div class="newsbox">
    <div class="h146" @click="listClick($event)">
      <vueSeamlessScroll
        :data="dataList"
        :class-option="classOption"
        class="scrollbox"
      >
        <div
          v-for="(row, ri) in dataList"
          :key="ri"
          :data-type="row.problemTypeSerialNumber"
          class="scrollbox-sub"
        >
          <div class="tl" :title="row.title">
            <img :src="row.imgBg" alt="" />
          </div>
          <div class="tit">
            长春太威武:{{
              row.title
                ? row.title.length > 16
                  ? row.title.substr(0, 16) + "..."
                  : row.title
                : "/"
            }}
          </div>
          <div class="time">2022-10-09 14:22:01</div>
          <div class="more" @click="goNew(row)">
            <img :src="row.imgBg2" alt="" />
          </div>
        </div>
      </vueSeamlessScroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "tables",
  components: { vueSeamlessScroll },
  props: {
    dataList: {
      type: Array,
      default: [],
    },
  },
  computed: {
    classOption() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: this.dataList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  watch: {},
  data() {
    return {};
  },
  methods: {
    listClick(e) {
      // const item = e.target.closest(".row-item");
      // if (item) {
      //   const { type } = item.dataset;
      //   this.$parent.hanldOpen(type);
      // }
      // console.log(11);
    },
    goNew(item) {
      console.log("item", item);
      this.$confirm("将打开第三方网站链接，是否确认跳转？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.newsbox {
  .h146 {
    height: 146px;
    overflow: hidden;
  }
  .scrollbox {
    .scrollbox-sub {
      display: flex;
      height: 30px;
      width: 100%;
      justify-content: space-around;
      padding: 0 10px;
      align-items: center;
      .tl {
        display: flex;
        align-items: center;
        img {
          width: 47px;
          height: 20px;
          overflow: hidden;
        }
      }
      .tit {
        display: flex;
        box-sizing: border-box;
        overflow: hidden;
        height: 20px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #f7f7f7;
        width: 288px;
      }
      .time {
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #f7f7f7;
      }
      .more {
        cursor: pointer;
      }
    }
  }
}
</style>