vue做无缝滚动

news2024/10/6 5:53:36

类似于这种:

 以上截图来自于官网:vue-seamless-scroll

 具体使用步骤为:

1:安装

cnpm install vue-seamless-scroll --save  

2:引入

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

3:使用:

<template>
  <vue-seamless-scroll
    :data="listData"
    :class-option="classOption"
    class="warp"
  >
    <ul class="ul-item">
      <li class="li-item" v-for="(item, index) in listData" :key="index">
        {{ item }}
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
    name: 'Example03Basic',
    components: {
      vueSeamlessScroll
    },
    data () {
      return {
        listData: [1, 2, 3, 4, 5, 6],
        classOption: {
          limitMoveNum: 2,
          direction: 3,
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .warp {
    width: 130px * 4;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      &.ul-item {
        display: flex;
        .li-item {
          width: 120px;
          height: 120px;
          margin-right: 10px;
          line-height: 120px;
          background-color: #999;
          color: #fff;
          text-align: center;
          font-size: 30px;
        }
      }
    }
  }
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1041504.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

最熟悉的陌生人!Java运算符详解

&#x1f451;专栏内容&#xff1a;Java⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、算术运算符1、四则运算符2、增量运算符3、自增、自减运算符 二、关系运算符三、关系运算符1、逻辑与 &&2、逻辑或|…

【PDF提取页面】使用Adobe Acrobat提取PDF文档的某几个页面另存

▚ 01 使用Adobe Acrobat打开目标文件 ▚ 02 打开 ->页面缩略图Page Thumbnails ▚ 03 右键选择 -> 提取页面 Extract Pages… ▚ 04 选择提取的页数范围 &#x1f341; 一般设置提取页面的初始位置和截至位置即可。 ▚ 05 将提取的目标页面另存为->新PDF文

基于微信小程的流浪动物救助宠物领养平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

05_JavaScript基本语法

1 变量 1.1 标识符 程序开发中&#xff0c;经常需要自定义一些符号来标记一些名称&#xff0c;并赋予其特定的用途&#xff0c;如变量名、函数名等&#xff0c;这些符号都被称为标识符。 定义规则 由大小写字母&#xff08;A-Z,a-z&#xff09;、数字&#xff08;0-9&#…

[docker]笔记-网络故障处理

1、同事在虚拟机上部署docker&#xff0c;发现电脑无法登录虚拟机了。首先ping测是通的&#xff0c;从我电脑继续进行登录测试发现没问题&#xff0c;初步判断是她电脑网络和虚拟机网络之间连接出错。 2、进行虚拟机登录查看&#xff0c;首先使用route -n命令查看路由&#xf…

Java深入理解线程的三大特性

目录 1 CPU缓存导致可见性问题2 线程切换导致原子性问题3 性能优化导致有序性问题4 JMM(Java Memory Model)5 volatile6 synchronized 1 CPU缓存导致可见性问题 线程的三大特性&#xff1a; 可见性&#xff1a;Visibility有序性&#xff1a;Ordering原子性&#xff1a;Atomic…

YApi Pro

1.介绍 说明&#xff1a;YApi Pro 是一款高效、易用、功能强大的 API 管理平台&#xff0c;旨在为开发、产品、测试人员提供更优雅的接口管理服务。它可以帮助开发者轻松创建、发布、维护 API&#xff0c;同时为用户提供了优秀的交互体验&#xff0c;开发人员可以更加高效地完…

【面试算法——动态规划 19】最长回文子序列 (hard)让字符串成为回文串的最少插入次数

516. 最长回文子序列 链接: 516. 最长回文子序列 给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 示例 1&…

C语言实现八种功能的通讯录(添加、删除、查找、修改、显示、排序、退出、清空)

通讯录功能概要及前提说明 此通讯录利用C语言完成&#xff0c;可以实现八种功能的通讯录&#xff08;添加、删除、查找、修改、显示、排序、退出、清空&#xff09; 代码由三部分组成&#xff0c;为什么要写成三部分而不写成一部分可以参考我以前的博客&#xff0c;如下&…

【Linux】Linux多线程

怎么理解线程线程的优缺点线程的二级页表线程用途怎么管理线程线程创建获取创建后的ID方法 线程等待线程终止分离线程线程ID及进程地址空间布局 怎么理解线程 通俗易懂的说&#xff0c;线程的运行是必须有进程给它打个基础。线程的运行是服用进程的代码及空间来进行运作的。 那…

[架构之路-223]:数据管理能力成熟度评估模型DCMM简介

目录 一、背景 二、评估依据 三、评估内容 四、主要适用对象 五、能力等级 六、不同层次的文件&#xff1a; 一、背景 信息技术与经济社会的交汇融合引发了数据爆发式增长。数据蕴含着重要的价值&#xff0c;已成为国家基础性战略资源&#xff0c;正日益对全球生产、流通…

会声会影和pr哪个好用? 2023年最新功能介绍解析

随着抖音、快手、B站等视频平台的普及&#xff0c;每个人都能成为视频创作者&#xff0c;视频剪辑软件成为自媒体创作的必备工具。一些新入门视频剪辑的小伙伴可能会疑惑&#xff0c;会声会影和PR软件哪个好呢&#xff1f;今天我将从核心功能、稳定性和性价比三个方面&#xff…

从中序遍历和后序遍历构建二叉树

题目描述 106. 从中序与后序遍历序列构造二叉树 中等 1.1K 相关企业 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1…

腾讯Mini项目课程前置学习笔记(第一轮)

Mini项目课程前置学习笔记&#xff08;第一轮&#xff09; 时间&#xff1a;5.20 ~ 5.23 项目基本介绍 项目 B. 指标监控服务重构 指标的收集与展示是后台系统监控中非常重要的一环&#xff0c;很可惜大而全的全链路监控方案并不适合我们&#xff0c;于是就有了本 mini 项目。…

cesium在vue中引入报错

npm install cesium1.95.0 找了很久各种办法都用了 最后就是降到这个版本。 在main.js中这样引入就可以运行起来了 import * as Cesium from cesium/Build/Cesium/Cesium.js; import cesium/Build/Cesium/Widgets/widgets.css; Vue.prototype.cesiumCesium 没出来是因为这个…

根据表名称快速查询表所有字段是否包含特定数据筛选

当前需要清理某个表中所有字段&#xff0c;检查是否有包含DEl字符的脏数据&#xff0c;如果字段比较少的直接根据字段查询即可&#xff0c;但是如果有几十个字段的话&#xff0c;逐个检查会很慢。 当前使用的方式是&#xff1a; 1&#xff1a;根据表名称获取当前表所有的字段 …

《信息系统项目管理师教程(第4版)》第1章至第5章 信息化发展、信息技术发展、信息系统治理、信息系统管理、信息系统工程 常见考点、知识点、思维导图、xmind

第一章至第五章多以选择题形式考察&#xff0c;分值在20分左右。已将考点、知识点整理成思维导图&#xff0c;可免费下载。以下是思维导图的部分截图&#xff1a; 第一章 信息化发展 第二章 信息技术发展 第三章 信息系统治理 第四章 信息系统管理 第五章 信息系统工程

代码随想录算法训练营第四十二天 | 动态规划 part 4 | 01背包问题(二维、一维滚动数组)、416. 分割等和子集

目录 01背包问题 二维代码 01背包问题&#xff08;一维滚动数组&#xff09;代码 416. 分割等和子集思路代码 01背包问题 二维 背包问题汇总&#xff1a; 二维数组dp——01背包五部曲 dp[i][j]表示从下标为[0-i]的物品里面任意取&#xff0c;放进容量为j的背包&#xff0c;价值…

Redis入门 (店铺营业状态设置) --苍穹外卖day4

目录 redis简介 redis下载与安装 redis服务启动与停止​编辑 redis数据类型 五种常用数据类型 各个类型特点 redis常用命令 字符串 哈希 列表 集合 有序集合 通用指令 ​在Java中操作Redis 导入坐标 编写配置类​ 通过RedisTem~对象操作 字符串 ​哈希 列…

什么是CDN

CDN是什么&#xff1f; 假设有一个IP为100.1.1.1的服务器网站&#xff0c;在没有CDN的情况下&#xff0c;PC先访问该服务器的DNS服务器&#xff0c;经过域名解析后再去访问服务器&#xff0c;如下图&#xff1a; 如果部署了CDN&#xff0c;这时候就有一个能识别CDN节点的DNS服…