解决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> 将会出现滚动 ...
随机推荐
- .Net 7 托管Main入口的四种类型
前言: 按照CLR的规则,C#托管Main入口其实有四种写法. 写法 第一种:最常见的,也是VS默认的,返回值void,带一个参数 static void Main(string[] args) { ...
- [Codeforces Round #794 (Div. 2)] D. Linguistics
我是什么东西艹艹艹 <我离正解只差个sort> 首先,观察字符串,可以发现:若存在形似\(AA--BB\)或\(BB--AA\)等有两个相同的字符挨在一起的情况,则我们在它们中间放一块隔板 ...
- 浪 - Java
如果你的计算机还没有安装 Java, 这篇说明很适合你. OpenJDK 下载地址 历史版本归档 环境配置 cd ~/.local wget https://download.java.net/jav ...
- springboot使用EasyExcel,导出数据到Excel表格,并且将Excel表中数据导入
一.导出至Excel 1.导入依赖 导出方法需要使用到fastJson的依赖,这里也直接导入 点击查看代码 <!--阿里的easyexcel--> <dependency> & ...
- 11月30日内容总结——前端简介、http协议概念、html协议概念及基础知识和部分标签的讲解
目录 一.前端与后端的概念 什么是前端开发? 什么是后端? 学习前端的目的 前端三剑客 二.前端前戏 三.HTTP协议 1.四大特性 2.报文格式 3.响应状态码 四.HTML概览 1.HTML简介 ...
- Python标准库typing
Python标准库typing https://docs.python.org/zh-cn/3/library/typing.html 简介 python3.5+才有 Python 运行时不强制执行函 ...
- Ribbon负载均衡 (源码分析)
Ribbon负载均衡 SpringCloud已经删除了ribbon组件,所以需要手动导入依赖.(要学是因为很多项目业务已经使用了ribbon) 服务拉取的时候添加了@LoadBalanced注解,实现 ...
- @Slf4j -- lombok.extern.slf4j.Slf4j;
@Log4j:注解在类上:为类提供一个 属性名为log 的 log4j 日志对像 package com.atguigu.springcloud.controller; import com.atgu ...
- 一款备受欢迎的用户脚本管理器插件TampermonKey-油猴脚本管理器安装与使用
Tampermonkey简介 Tampermonkey是一款备受欢迎的浏览器扩展和用户脚本管理器,它适用于目前各种主流浏览器. 方便的脚本管理(正在运行的脚本和可以运行的脚本在图标处显示一览无余) 脚 ...
- 怎么在GridView中限制显示字数
三种方法可以实现,前两种是C#代码实现(原理一样),第三种是CSS实现. 1.cs代码中:GridView的RowDataBound中对想做处理的项做Remove()字符串截取. 2.aspx页面中: ...