vue实现滚榜效果

前言：基于vue做一个类似于比赛滚榜的榜单

要实现这个效果需要用到vue里面的一个组件–

vue-seamless-scroll使用这个插件相对而言实现起来比较容易。

想要了解更多可点击

https://github.com/chenxuan0000/vue-seamless-scroll

安装和导入vue-seamless-scroll

NPM安装：

npm install vue-seamless-scroll --save

CDN安装:

https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js

在main.js中导入

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

滚榜组件的完整代码如下：

<template>
  <div class="scollbox">
    <vue-seamless-scroll :data="List" class="seamless-warp" :class-option="classOption">
      <ul>
         <li class="DataList_top" v-for="(item,index) in List" :key="index">
            <div class="DataList_left one">{
   
   {index+1}}</div>
            <div class="DataList_left two">{
   
   {item.name}}</div>
            <div class="DataList_left three">{
   
   {item.question}}</div>
            <div class="DataList_left four">{
   
   {item.times}}</div>
            <div class="DataList_left five">{
   
   {item.state}}</div>
          </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>
 
<script>
import vueSeamless from 'vue-seamless-scroll'
export default {
    data() {
      return{
        List:[
          {name:'杭州试试事实上十三水节省',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
          {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
          {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
          {name:'fffff',question:'问题和辅导费点所发生的函数读到呼和',times:'2020-90-9',state:'已办理'},
          {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
          {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
          {name:'fffff',question:'问题和函数U盾感觉到更好地为将读到呼和',times:'2020-90-9',state:'已办理'},
          {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
          {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
          {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
        ]
      }
    },
    components: {    //组件
        vueSeamless
    },
    computed: {
 
     classOption () {
       return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 ,// 单步运动停止的时间(默认值1000ms)
        autoPlay:true
      }
    }
  },
}
 
 
</script>
 
 
<style scoped>
.seamless-warp{
  width: 100%;
  height: 18rem;
  overflow: hidden;
}
ul{
  padding: 0;
}
.DataList_top{
  list-style: none;
  width: 100%;
  height: 4rem;
  background-color: #4383C1;
  margin-top: 0.5rem;
  color: white;
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.DataList_left{
  float: left;
  text-align: center;
}
.one{
  width: 8%;
}
.two{
  width: 26%;
  margin-left: 1%;
}
.three{
  width: 29%;
  margin-left: 1%;
}
.four{
  width: 19%;
  margin-left: 1%;
}
.five{
  width: 14%;
  margin-left: 1%;
  color: greenyellow;
}


</style>

其他的样式布局可以根据需求改动

一些小问题：

• 首尾没有做到无缝衔接（有距离）
• pc端不能手动拖动