vue-seamless-scroll 使用

文章目录

一、vue-seamless-scroll 使用入门
二、vue-seamless-scroll 概述
三、注意项1：点击事件无响应
四、注意项2、循环列表如何无缝滚动
五、参考文档

一、vue-seamless-scroll 使用入门

本文仅为记录 vue-seamless-scroll 使用的相关注意事项。

二、vue-seamless-scroll 概述

官网地址
在线演示文档地址
常见注意项

关于如何使用 vue-seamless-scroll，查看上面文档就可以了。接下来，记录下使用过程中遇到的问题。

QQ录屏20220815175858

三、注意项1：点击事件无响应

https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/issuses.html

这里描述了相关信息。

解决办法：

1、在父容器上添加 click 事件监听
2、在循环列表（行）上添加自定义的 data-* 属性
3、在 click 事件中获取自定义的 data-* 属性值

注意：

自定义的 data-* 属性的属性值必须是字符串类型的数据。

事件处理函数

四、注意项2、循环列表如何无缝滚动

1、给循环列表中的行设置固定的高和行高

2、父容器设置成要循环的数据的数量 * 每行数据的高度

这样就保证是无缝循环了。

五、参考文档

https://www.jianshu.com/p/1c9f8636da7a
https://blog.csdn.net/weixin_43992867/article/details/110622449

vue-seamless-scroll 使用相关推荐

vue中 @scroll的使用
@scroll 是 Vue 中的一个修饰符,可以用来监听元素的滚动事件. 使用方法: 在元素上绑定一个 @scroll 修饰符,并绑定一个事件处理函数,如: <template><d ...
基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
【uni-app、vue】scroll滑动、二级分类任性多选
<template><view><view class="uni-padding-wrap uni-common-mt"><view cl ...
vue 移动端音乐(3) amp;amp;gt;热门歌单推荐部分（webpack-dev-conf.js做后端接口代理+scroll插件）
1. 首先,获取歌单推荐部分的数据,与获取推荐数据不同,热门歌单数据的接口有host和referer的显示,我们的api请求被拒绝(500错误),必须要修改header,但是前端不能直接修改reque ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
用vue做项目的一些总结
原文链接:https://juejin.im/post/5b1e2b01f265da6e494def6b 1.新cli工具生成项目配置webpack,根路径创建vue.conf.js module.e ...
vue 仿二手交易app_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...
vue图片滚动抽奖_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...
vue 左右循环滑动_vue实现无缝滚动循环
大家好,我是一叶,最近做的项目用到循环滚动展示,在这里踩的坑和大家分享一下.一开始写的时候没打算用组件(其实是没找到),思路也很简单.把数据遍历之后,用js获取到可视范围的宽高,再逐次减去他的顶部高度 ...
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
vue实现循环滚动 vue-seamless-scroll插件的安装与使用 1. 安装 2. 引入 3. 直接上代码 4. 结果 1. 安装 npm install vue-seamless-scro ...