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横向滚动鼠标控制的更多相关文章

  1. VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动

    本文为横向轮播,纵向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...

  2. VSCode——滚动鼠标控制字体大小

    第一步:找到设置 文件-->首选项-->设置 第二步:打开settings.json文件 第三步:在settings.json文件中添加 "editor.mouseWheelZo ...

  3. flash滑杆控制图片横向滚动

    flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html

  4. Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...

  5. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  6. swiper3d横向滚动多张炫酷切换banner

    最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...

  7. [Python Study Notes]实现对鼠标控制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  8. 使 WPF 支持触摸板的横向滚动

    微软终于开始学苹果一样好好做触摸板了(就是键盘空格键下面那一大块).然而鉴于以前没有好好做,以至于 WPF 程序甚至都没有对触摸板的横向滚动提供支持(竖向滚动是直接使用了 MouseWheel,汗-- ...

  9. [Python Study Notes]pynput实现对鼠标控制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  10. html5 tab横向滚动,无滚动条(transform:translate)

    html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处 ...

随机推荐

  1. Solon Cloud Gateway 开发:导引

    Solon Cloud Gateway 是 Solon Cloud 体系提供的分布式网关实现(轻量级实现). 分布式网关的特点(相对于本地网关): 提供服务路由能力 提供各种拦截支持 1.分布式网关推 ...

  2. rbd常用的配置参数

    本文分享自天翼云开发者社区<rbd常用的配置参数>,作者:l****n rbd的基本介绍 rbd的架构如下图所示: rbd采用CRUSH算法实现数据的随机分布.CRUSH算法,即Contr ...

  3. Django项目与Vue的集成

    Django项目与Vue的集成 在现代Web开发领域,前后端分离已成为一种主流趋势.Django,作为一个强大的Python Web框架,以其丰富的功能和高度的可扩展性而受到开发者的青睐.而Vue.j ...

  4. mysql之数据连接池

    数据库连接池 C3P0: 配置文件 <?xml version="1.0" encoding="UTF-8"?> <c3p0-config&g ...

  5. [CF603E] Pastoral Oddities 题解

    注意力惊人的注意到我们可以将问题转化为所有联通块大小全部为偶数. 假如已经确认了所有加入的边,那么我们可以通过类似 \(K\) 算法的方式求解. 考虑到答案单调不升,所以每条边都有一个影响的区间.考虑 ...

  6. 软件工程: SDLC V模型

    V型 V-model 代表一个开发过程,可以被认为是瀑布模型的扩展,是更通用的 V-model 的一个例子.不是以线性方式向下移动,而是在编码阶段之后向上弯曲工艺步骤,以形成典型的 V 形.V 模型展 ...

  7. OpenOffice已停更六年 文档基金会呼吁用户迁移LibreOffice

    OpenOffice 源代码发布至今已经有 20 年了.文档基金会近日发布公开信,表示说:"LibreOffice 是 OpenOffice 的未来.我们将会全力以赴".以此呼吁那 ...

  8. Redis压测脚本及持久化机制

    Redis压测脚本及持久化机制 Redis性能压测脚本 Redis的所有数据是保存在内存当中的,得益于内存高效的读写性能,Redis的性能是非常强悍的.但是,内存的缺点是断电即丢失,所以,在实际项目中 ...

  9. pandas 操作excel

    一 Series 什么是series 相当于表格中的行和列,不同的设置可以按行或列排序 2.series 创建 空的series import pandas as pd s2=pd.Series() ...

  10. mac 触控板 三指拖动

    1. 打开系统偏好设置 点击屏幕左上角的苹果图标(),选择"系统设置". 2. 打开指针控制 在系统偏好设置窗口左侧栏中,点击"辅助功能",然后在右侧列表中, ...