解决iview拖动头部横向滚动问题
Vue.directive('dragsroll', {
bind (my_el) {
let elHeader = my_el.querySelector('div.ivu-table-header');
let el = my_el.querySelector('div.ivu-table-body');
elHeader.style.cursor = 'grab';
elHeader.onmousedown = function () {
let gapX = event.clientX;
let startX = elHeader.scrollLeft;
document.onmousemove = function (e) {
let x = e.clientX - gapX;
el.scrollLeft = startX - x;
return false;
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
})
注册全局自定义指令,然后再i-table中调用即可

解决iview拖动头部横向滚动问题的更多相关文章
- 解决iScroll横向滚动区域无法拉动页面的问题
近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
- 一款兼容IE6并带有多图横向滚动的jquery特效
一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...
- 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView
李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView 11111222
- 李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView
李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView (VTmagic是一个实现左右滚动的控制器的框架,也可以实现此功能) 实现的效果: 01 - 创建四个控制器 02 - 定义需要 ...
- 李洪强实现横向滚动的View<二>
上一节中我们已经实现了一个带有图片,标题和价格label 的UIView 这节我们用这个view实现一个横向滚动的UIcollectionView 实现的效果如下: 01 - 创建CFTyreScr ...
- js实现文字横向滚动
页面布局 <div id="scroll_div" class="fl"> <div id="scroll ...
- Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》
Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...
- 使用elementUI滚动条之横向滚动
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...
随机推荐
- Docker 基础 - 1
镜像 获取镜像 docker pull 查看镜像信息 docker images docker inspect <images id> # 获取镜像的详细信息 搜寻镜像 docker se ...
- 特殊input框需求,粘贴文字或者扫码筛选检查后加密为password格式,否则正常显示/假如用户输入的信息是以mima开头,就切换输入框为密码类型
1.angular8粘贴文字或者扫码筛选检查后加密为password格式,否则正常显示 <input [type]="myInputType" (keyup.enter)=& ...
- Vue08 数据代理
1 说明 所谓"数据代理",是指 通过一个对象代理对另一个对象的属性进行读或写操作. 2 简单示例 2.1 代码 let obj = {x:100}; let obj2 = {y: ...
- 2021级《JAVA语言程序设计》上机考试试题1
昨天进行了期末考试,考的不够理想,看见题没思路,到了10点半刚刚进入状态,11点半结束....... 这是学生的试题要求(按照评分卡上的来,卷子上要求和评分卡不一致(.......)) 这是登录页面 ...
- SpringMVC的表单组件、国际化
spring mvc 的表单标签库 1.Student实体类 package com.southwind.POJO; import lombok.Data; @Data public class St ...
- 交叉熵损失CrossEntropyLoss
在各种深度学习框架中,我们最常用的损失函数就是交叉熵,熵是用来描述一个系统的混乱程度,通过交叉熵我们就能够确定预测数据与真实数据的相近程度.交叉熵越小,表示数据越接近真实样本. 1 分类任务的损失计算 ...
- 如何让别人pip install自己写的库?
一. 构建项目目录结构 结构如图所示: 文件介绍:LICENSE和README.md在git建仓库时选上,克隆下来就会有,license最好选择MIT的.sort.py文件里随便写个方法用于直接调用: ...
- 基于Python的OpenGL 06 之摄像机
1. 引言 本文基于Python语言,描述OpenGL的摄像机 前置知识可参考: 基于Python的OpenGL 05 之坐标系统 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔 ...
- 基于Python的OpenGL 04 之变换
1. 概述 本文基于Python语言,描述OpenGL的变换 前置知识可参考: 基于Python的OpenGL 03 之纹理 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔者这里 ...
- Map Inference in the Face of Noise and Disparity代码环境搭建
1. 引言 地图生成算法网站Mapconstruction by pfoser里可以看到许多关于地图生成算法的介绍,Map Inference in the Face of Noise and Dis ...