E-commerce/src/components/seamless/index.vue

<!--
 描述: 新闻无缝滚动
 作者: Jack Chen
 日期: 2020-04-18
-->

<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">新闻无缝滚动</div> 
      <div class="sn-body"> 
        <div class="wrap-container">

          <div class="table">
            <table border="0" cellpadding="0" cellspacing="0" class="table-header">
              <tbody>
                <tr>
                  <td width="60%">
                    <span>标 题</span>
                  </td>
                  <td width="20%">
                    <span>日 期</span>
                  </td>
                  <td width="20%">
                    <span>热 度</span>
                  </td>
                </tr>
              </tbody>
            </table>

            <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
              <table border="0" cellpadding="0" cellspacing="0" class="item">
                <tbody>
                  <tr v-for="(item, index) in listData" :key="index">
                    <td width="100%" class="title">
                      <span :class="{colorRed: item.hot > 4999}">{{ item.title }}</span>
                    </td>
                    <td width="20%">
                      <span>{{ item.date }}</span>
                    </td>
                    <td width="20%">
                      <span :class="{colorRed: item.hot > 4999, colorOrange: item.hot < 10}">{{ item.hot }}</span>
                    </td>
                  </tr>
                </tbody>
            </table>
            </vue-seamless-scroll>
          </div>

        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: "seamless",
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
     listData: [{
        title: '钱花哪了?一图带你读懂年轻人的消费观',
        date: '2020-05-05',
        hot: 2306
     }, {
        title: '“五一”假期前三天国内旅游收入超350亿元',
        date: '2020-05-02',
        hot: 5689
     }, {
        title: '滴滴、美团、哈啰多赛道交战，本地生活会是终局？',
        date: '2020-05-02',
        hot: 9
     }, {
        title: '“互联网+文化”逆势上行文娱消费，云端真精彩',
        date: '2020-04-25',
        hot: 288
     }, {
        title: '乐观主义还是悲观主义？巴菲特事实上是个现实主义者！',
        date: '2020-04-21',
        hot: 158
     }, {
        title: 'B站的后浪，会把爱优腾拍在沙滩上吗?',
        date: '2020-04-20',
        hot: 889
     }, {
        title: '华为是如何做投资的：先给两个亿订单 一年送上市',
        date: '2020-04-01',
        hot: 5800
     }, {
        title: '马斯克：特斯拉股价太高了，我要卖豪宅',
        date: '2020-03-25',
        hot: 6
     }, {
        title: '人民日报海外版：云模式巧解“就业难”',
        date: '2020-03-16',
        hot: 88
     }, {
        title: '刚刚港股"崩了"：狂跌近1000点！发生什么？',
        date: '2020-03-12',
        hot: 88
     }, {
        title: '个人健康信息码国家标准发布',
        date: '2020-02-28',
        hot: 5
     }, {
        title: '传软银国际裁员约10% 拉美基金两名管理合伙人离职',
        date: '2020-02-15',
        hot: 258
     }, {
        title: '27.5万个岗位：事业单位、人工智能等热门专场招聘',
        date: '2020-02-10',
        hot: 198
     }, {
        title: '一季度电子商务发展势头迅猛 农村电商突破1300万家',
        date: '2020-02-08',
        hot: 19
     }]
    }
  },
  computed: {
　　optionSetting () {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // autoPlay: false,
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },  
  mounted() {
    
  },
  methods: {
    
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 1370px;
  top: 110px;
  %table-style {
    width: 100%;
    height: 35px;
    table-layout: fixed;
    tr {
      td {
        padding: 10px 5px;
        text-align: center;
        background-color: transparent;
        white-space: nowrap;
        overflow: hidden;
        color: #E2E5FF;
        font-size: 14px;
      }
    }
  }
  .table {
    .table-header {
      @extend %table-style;
    }
    .seamless-warp {
      height: 400px;
      overflow: hidden;
      visibility: visible;
      .colorRed {
        color: #FF4669;
      }
      .colorOrange {
        color: #FFC956;
      }
      .item {
        height: auto;
        @extend %table-style;
        tr {
          td {
            &.title {
              text-overflow: ellipsis;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>