vue无缝滚动轮播 scroll

3 篇文章 0 订阅

遇到个需求是做一个无缝滚动的列表,这个千辛万苦找到了一个插件 vue-seamless-scroll,还是要记录下来,不然下次可能还会再找。

1.安装

npm run vue-seamless-scroll --save

2.配置

2.1全局配置

在main.js中,配置

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

3.使用

当时找到这个但是还是有些配置不太懂 后来去npm上搜索一番,看了看文档找到了相关的参数配置

3.1参数配置
keydescriptiondefaultval
step滚动速度越快越快1Number
limitMoveNum开始无缝滚动最小数据长度5Number
hoverStop是否启用鼠标hover控制trueBoolean
direction方向 0 往下 1 往上 2向左 3向右1Number
openTouch移动端开启touch滑动trueBoolean
singleHeight单个停止高度(默认为零无缝)=>方向0/10Number
singleWidth单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/30Number
waitTime单步停止等待时间(默认值1000ms)1000Number
switchOffset左右切换按钮距离左右边界的边距(px)30Number
autoPlay是否自动播放开关需要设置为falsetrueBoolean
switchSingleStep手动单步切换step值(px)134Number
switchDelay单步切换的动画时间(ms)400String
switchDisabledClass不可以点击状态的switch按钮父元素的类名disabledString
isSingleRemUnitsingleHeight and singleWidth是否开启rem度量falseBoolean
3.2使用
<vue-seamless-scroll :data="list" :class-option="classOption" class="table-content">
  <ul>
        <li v-for="(item,index) in list"  :key="index">
                内容
        </li>
   </ul>
</vue-seamless-scroll>
<script>
  computed: {
    classOption () {
      return {
        singleHeight: 57,
        waitTime: 2000,
        step: 0.5,
        hoverStop: false 
      }
    }
  },
</script>
<style>
.table-content {
    height: 570px;
    overflow: hidden;
}
</style>

ok了,基本的就完善了 里面的内容没有放进去,公司的业务代码,下面给你们看看效果图 (声明:数据都是自己模拟的mock数据,跟公司数据没有任何关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I4ROOONy-1589183509373)(https://upload-images.jianshu.io/upload_images/11611010-6860276b01ca8109.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ExFRHXZB-1589183509375)(https://upload-images.jianshu.io/upload_images/11611010-bca3347639e09109.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

不会做gif图,没得办法只能截图 第一张是滚动中,第二征是正常的图,只要大家效果实现出来就ok了,图就撮合着看就好了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值