vue3 vue-seamless-scroll

• 前端

最近开发过程中做大屏的页面，需求用到无缝滚动列表，发现一个特别好用的插件，分享给大家，欢迎评论区讨论话题。

vue3 vue-seamless-scroll

针对于vue3版本

  1. npm install vue-seamless-scroll@1.1.23 安装无缝滚动插件

vue3 vue-seamless-scroll

如果报错则添加–legacy-peer-deps指令，进行强制安装

  1. 在main.js中引用vue-seamless-scroll/src一定要添加/src，vue3版本引用插件不同处

import vueSeamless from "vue-seamless-scroll/src";

createApp(App).use(store).use(router).use(vueSeamless).mount("#app");

  1. 完整实例代码

  
    
      
        
    
          
  • 
            {{ item.title }}：{{ item.time }}
          
    • 
        

      
    
  



export default {
  name: "scroll",
  data() {
    return {
      listData: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 0.8, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 200, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    for (let i = 1; i <= 5; i++) {
      const index = i - 1;
      const j = {
        title: `无缝滚动第${i}条`,
        time: `下标为${index}`,
      };
      this.listData.push(j);
    }
  },
};



.page-example3 {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 1px solid skyblue;
  .ul-scoll {
    margin: 20px 0;
    padding: 0;
    li {
      margin: 6px;
      padding: 5px;
      background: antiquewhite;
    }
  }
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/36f29a6c0d.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐