【vue】 vue-seamless-scroll 无缝滚动依赖-阿里云开发者社区

【vue】 vue-seamless-scroll 无缝滚动依赖

2024-04-12 26

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【vue】 vue-seamless-scroll 无缝滚动依赖

最近vue2项目中有使用文图和文字的无缝滚动场景，从网上看到有些挺有用的，特摘抄分享一下。

1.安装依赖

npm install vue-seamless-scroll --save

2.注册

全局注册

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

局部

<vue-seamless-scroll></vue-seamless-scroll>
 
import vueSeamlessScroll from 'vue-seamless-scroll'  // vue2引入方式
import scroll from "vue-seamless-scroll/src"  // vue3引入方式
 
components: {
        vueSeamlessScroll
},

3.参数配置

// 监听属性 类似于data概念
        computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 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)
                }
            }
 
        },

key	description	default	val
step	数值越大速度滚动越快	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay	1.1.17 版本前手动切换时候需要置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean
navigation	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	false	Boolean

案例

案例代码

<template>
  <div>
      <vue-seamless-scroll
        :data="listData"
        :class-option="seamlessScrollOption"
        style="
          border: 1px solid white;
          height: 200px;
          overflow: hidden;
          width: 200px;
          color: white;
          font-size: 18px;
          text-align: center;
        "
      >
        <ul>
          <li
            v-for="(item, index) in listData"
            :key="index"
            style="padding: 10px; margin: 5px"
          >
            <span class="title">{{ item.title }}：</span
            ><span class="date">{{ item.time }}</span>
          </li>
        </ul>
      </vue-seamless-scroll>
  </div>
</template>
 
<script>
 
export default {
  props: {},
  data() {
    return {
      listData: [
        {
          title: "张三",
          time: "2021-08-09",
        },
        {
          title: "李四",
          time: "2021-08-09",
        },
        {
          title: "王五",
          time: "2021-08-09",
        },
        {
          title: "赵六",
          time: "2021-08-09",
        },
        {
          title: "前七",
          time: "2021-08-09",
        },
        {
          title: "孙八",
          time: "2021-08-09",
        },
      ],
    };
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 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)
      };
    },
  },
};
</script>