滚动列表
<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>