Vue横向滚动鼠标控制
let level_cards
// 标记可移动
, move_start
// 移动初始的x位置
, move_x
// 移动初始的容器偏移量
, move_scroll_left
// 判断是否为移动, 是则取消原来的点击
, moved
startMove(e) {
// console.log(e)
move_start = true
move_x = e.clientX
move_scroll_left = level_cards.scrollLeft
},
move(e) {
if(move_start) {
// 位移大于10像素认为是移动
if(move_x - e.clientX > 10) {
moved = true
}
level_cards.scrollLeft = move_scroll_left + move_x - e.clientX
}
},
endMove(e) {
e.stopPropagation()
move_start = false
},
Vue横向滚动鼠标控制的更多相关文章
- VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动
本文为横向轮播,纵向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...
- VSCode——滚动鼠标控制字体大小
第一步:找到设置 文件-->首选项-->设置 第二步:打开settings.json文件 第三步:在settings.json文件中添加 "editor.mouseWheelZo ...
- flash滑杆控制图片横向滚动
flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html
- Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- swiper3d横向滚动多张炫酷切换banner
最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...
- [Python Study Notes]实现对鼠标控制
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- 使 WPF 支持触摸板的横向滚动
微软终于开始学苹果一样好好做触摸板了(就是键盘空格键下面那一大块).然而鉴于以前没有好好做,以至于 WPF 程序甚至都没有对触摸板的横向滚动提供支持(竖向滚动是直接使用了 MouseWheel,汗-- ...
- [Python Study Notes]pynput实现对鼠标控制
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- html5 tab横向滚动,无滚动条(transform:translate)
html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处 ...
随机推荐
- ESP32 VScode环境问题
vsdcode esp-idf插件安装 报错: Espressif\tools\idf-python\3.11.2\python.exe -m pip" is not valid. (ERR ...
- Dart中操作符详细介绍和使用
dart中静态成员 1 使用satic关键字 来实现类级别的变量和函数 2 静态方法不能够访问非静态成员, 非静态方法可以访问静态成员 3 静态属性,不要通过this去访问 因为this指向的是这个实 ...
- Flink Maven项目,依赖配置pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
1 大人,时代变了! 赶快把自有业务的本地AI"模型"训练起来! 1.1 背景 目前AI已经大行其道,chatGPT.DeepSeek等如雨后春笋般涌现出来,笔者做为一个守旧派 ...
- .Net Core 项目启动方式
本文篇幅较小,讲解如何通过命令行启动项目 接着上一章的Core WebApi(https://www.cnblogs.com/zousc/p/12420998.html),我们已经有了Hello这个控 ...
- DeepSeek文本和编程测试
2025年春节期间,能直面电影<哪吒2>锋芒的,也就只有号称"国运级"的大模型DeepSeek了. 在科技圈里,这句话也可以反过来说. DeepSeek为什么能爆火,自 ...
- 动态编译 Java 的神器 Liquor v1.3.10 发布
Liquor 是一个开源的轻量级 Java 动态编译器(零依赖,40KB),它可以在运行时编译 Java 字符串代码片段.类.方法等. 源码地址:https://gitee.com/noear/liq ...
- MySQL - [07] 查看库表数据所使用的空间大小
1.切换数据库:use information_schema; 2.查看数据库使用大小 SELECT concat(round(sum(data_length/1024/1024),2),'MB') ...
- 7. Nginx 工作机制&参数设置(详细讲解说明)
7. Nginx 工作机制&参数设置(详细讲解说明) @ 目录 7. Nginx 工作机制&参数设置(详细讲解说明) 1. Nginx 当中的 master-worker 机制原理 2 ...
- ESP AT指令使用记录
一.前言 本篇文章主要用于记录自己在使用AT指令时候的流程,记录一些资料与程序等.如果能帮到你,请给我点个赞. 二.背景知识 ESP-AT是什么? ESP-AT 是乐鑫开发的可直接用于量产的物联网应用 ...