vue插件实现循环滚动列表—

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

  1 <template>
  2   <div class="index">
  3     <div class="banner">
  4       <div class="width1000">
  5          <el-input
  6           class="search-input"
  7           placeholder="搜索资源"
  8           v-model="searchKey">
  9           <i slot="prefix" class="el-input__icon el-icon-search"></i>
 10         </el-input>
 11       </div>
 12     </div>
 13 
 14     <div class="notice-box">
 15       <div class="width1000">
 16          <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
 17           <ul class="item">
 18               <li v-for="(item, index) in newsList" :key="index" v-text="item.title"></li>
 19           </ul>
 20       </vue-seamless-scroll>
 21       </div> 
 22     </div>
 23   </div>
 24 </template>
 25 
 26 <script>
 27 import vueSeamlessScroll from 'vue-seamless-scroll'
 28   export default{
 29     name: 'index',
 30     components:{
 31      vueSeamlessScroll
 32     },
 33     data(){
 34       return {
 35         searchKey: '',
 36         newsList: [{
 37           'title': '1、所有组件的 输入输出格式要遵循一定标准，最起码可以跟踪一个尝试执行的用例。'
 38         }, {
 39           'title': '2、编排时，每个组件都额外编排一个前置的'
 40         }, {
 41           'title': '3、自己实现日志消费服务，监控 syslog 通过TCP端口 发送过来的日志，消费整理，把分析写入业务数据库'
 42         }]
 43       }
 44     },
 45      computed: {
 46        optionLeft () {
 47         return {
 48           direction: 2, // 左方向
 49           limitMoveNum: 3
 50         }
 51       }
 52     },
 53     mounted(){
 54       
 55     },
 56     methods:{
 57       
 58     }
 59   }
 60 </script>
 61 
 62 <style lang="scss" scoped>
 63   .index {
 64     .banner {
 65        100%;
 66       height: 460px;
 67       background: url('../assets/images/banner-bg.png') no-repeat left top;
 68       background-size: 100% 100%;
 69       .width1000 {
 70         display: flex;
 71         justify-content: center;
 72         .search-input {
 73            760px;
 74           margin-top: 300px;
 75           /deep/ .el-input__inner {
 76             height: 50px;
 77             line-height: 50px;
 78           }
 79         }
 80       }
 81     }
 82     .notice-box {
 83       height: 38px;
 84       line-height: 38px;
 85       background: #011130;
 86       color: #fff;
 87       .seamless-warp2 {
 88         overflow: hidden;
 89         height: 38px;
 90          100%;
 91         ul.item {
 92            100%;
 93           li {
 94               float: left;
 95               margin-right: 10px;
 96               font-size: 14px;
 97           }
 98         }
 99       }
100     }
101     
102   }
103 </style>