vue-seamless-scroll 轮播滚动

亦凉 2023-01-04 10:20 7阅读 0赞

安装

cnpm install vue-seamless-scroll --save

引入

import vueSeamlessScroll from 'vue-seamless-scroll'
    components: {  //组件
    			vueSeamlessScroll
    		},

<template>
    
    	<vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp" :class-option="classOption">
    		<ul>
    			<li class="DataList_top" v-for="(item,index) in CardPartsStatisticsList" :key="index" v-if="index < 5">
    				<div class="DataList_left">{
       {index+1}}</div>
    				<div class="DataList_left">{
       {item.itemname}}</div>
    				<div class="DataList_left">{
       {item.number}}</div>
    			</li>
    		</ul>
    	</vue-seamless-scroll>
    
    </template>
    
    <script> import vueSeamlessScroll from 'vue-seamless-scroll' export default { data() { return { CardPartsStatisticsList: [] }; }, components: { //组件 vueSeamlessScroll }, computed: { classOption() { return { step: 0.2, // 数值越大速度滚动越快 limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length hoverStop: false, // 是否开启鼠标悬停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) } } }, created() { for (var i = 0; i < 2; i++) { this.CardPartsStatisticsList.push({ itemname: i, number: i }); } } } </script>
    
    
    <style> .seamless-warp { width: 100%; height: calc(100% - 16px); overflow: hidden; } </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue可滚动的轮播

<template> <md-card> <md-card-actions> <div class="md-subhea

你的名字/ 2023年06月23日 10:59/ 0 赞/ 4 阅读

相关 vue-seamless-scroll 轮播滚动

安装 cnpm install vue-seamless-scroll --save 引入 import vueSeamlessScroll from '

亦凉/ 2023年01月04日 10:20/ 0 赞/ 8 阅读

相关无缝轮播滚动html模板,js轮播图无缝滚动效果

在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：先文字说明一下：如果要展示5张图，分别为1,2,3,4,5 那么在代码的引入中是这样的：1

缺乏、安全感/ 2022年10月06日 10:53/ 0 赞/ 276 阅读

相关单页面轮播图滚动

现在网上好多类似的效果，今天心情好，就私自模仿一个去，代码如下。单页面网站网站首页公司简介公司产品公司荣誉招聘英才联系我们 window.οnsc

分手后的思念是犯贱/ 2022年09月01日 13:57/ 0 赞/ 207 阅读

相关顶部轮播图(自动循环滚动)

1.MainActivity: public class MainActivity extends Activity { private View

骑猪看日落/ 2022年08月01日 00:17/ 0 赞/ 212 阅读

相关前端插件之滚动轮播

效果如下： ![20170831130339495][] 1.css代码 <style> wrapperslide{

约定不等于承诺〃/ 2022年06月09日 07:44/ 0 赞/ 289 阅读

相关原生 js 实现无缝滚动轮播

上一次我们看了如何实现简单的轮播图，以及各种常用的效果实现；这一次，我们看看无缝滚动轮播图的实现（利用左边的margin 来实现）；原理：我们创建一个div，下图共

Love The Way You Lie/ 2022年05月28日 11:00/ 0 赞/ 329 阅读

相关超完美滚动轮播图

<!doctype html> <html> <head> <meta charset="utf-8"> <title>超完美滚动轮播图</title> <

约定不等于承诺〃/ 2022年04月22日 05:34/ 0 赞/ 269 阅读

相关 swiper横向轮播——阶梯式滚动轮播

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件，是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swipe

Myth丶恋晨/ 2021年12月16日 08:07/ 0 赞/ 1144 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 707 阅读