vue插件實現循環滾動列表——vue-seamless-scroll

https://blog.csdn.net/weixin_45389051/article/details/106379832?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

<template>
  <div class="index">
    <div class="banner">
      <div class="width1000">
         <el-input
          class="search-input"
          placeholder="搜索資源"
          v-model="searchKey">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>

    <div class="notice-box">
      <div class="width1000">
         <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
          <ul class="item">
              <li v-for="(item, index) in newsList" :key="index" v-text="item.title"></li>
          </ul>
      </vue-seamless-scroll>
      </div> 
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
  export default{
    name: 'index',
    components:{
     vueSeamlessScroll
    },
    data(){
      return {
        searchKey: '',
        newsList: [{
          'title': '1、所有組件的 輸入輸出格式要遵循一定標准，最起碼可以跟蹤一個嘗試執行的用例。'
        }, {
          'title': '2、編排時，每個組件都額外編排一個前置的'
        }, {
          'title': '3、自己實現日志消費服務，監控 syslog 通過TCP端口 發送過來的日志，消費整理，把分析寫入業務數據庫'
        }]
      }
    },
     computed: {
       optionLeft () {
        return {
          direction: 2, // 左方向
          limitMoveNum: 3
        }
      }
    },
    mounted(){
      
    },
    methods:{
      
    }
  }
</script>

<style lang="scss" scoped>
  .index {
    .banner {
      width: 100%;
      height: 460px;
      background: url('../assets/images/banner-bg.png') no-repeat left top;
      background-size: 100% 100%;
      .width1000 {
        display: flex;
        justify-content: center;
        .search-input {
          width: 760px;
          margin-top: 300px;
          /deep/ .el-input__inner {
            height: 50px;
            line-height: 50px;
          }
        }
      }
    }
    .notice-box {
      height: 38px;
      line-height: 38px;
      background: #011130;
      color: #fff;
      .seamless-warp2 {
        overflow: hidden;
        height: 38px;
        width: 100%;
        ul.item {
          width: 100%;
          li {
              float: left;
              margin-right: 10px;
              font-size: 14px;
          }
        }
      }
    }
    
  }
</style>