解决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> 将会出现滚动 ...
随机推荐
- 包子类&包子铺类-吃货类&测试类
包子类&包子铺类 资源类:包子类设置包子的属性皮陷包子的状态:有true,没有false package Demo01.WaitAndNotify; /** * 资源类:包子类设置包子的属性 ...
- 基于View接口
目录 基于View接口 1.写模型表以及数据库迁移 3.使用CBV写查询所有的视图接口 4.配路由 基于View接口 Django原生即继承View来实现写接口,的确过程很繁杂,很多东西都是手动写 ...
- 浅谈Python中的包
浅谈Python中的包 Package的定义(你以为的) 你在很多的地方都能看到关于package的定义:在Python中在当前目录下有__init__.py文件的目录即为一个package. 嗯,包 ...
- spring boot swagger ui使用 nginx 部署后无法使用问题
location /saleapi/ { ## 指定HOST proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_ ...
- .NET为什么推荐它作为RabbitMQ消息队列的首选开发工具
支持.Net Core(2.0及以上)/.Net Framework(4.5及以上),可以部署在Docker, Windows, Linux, Mac. RabbitMQ作为一款主流的消息队列工具早已 ...
- 一篇文章让你了解这个基于树莓派而设计的工业计算机-CM4 Industrial
CM4 Industrial是一款基于 Raspberry Pi / 树莓派 Compute Module 4,由EDATEC面向工业应用设计的嵌入式计算机设计的工业嵌入式计算机.系统可以根据不同的应 ...
- golang使用JWX进行认证和加密
golang使用JWX进行认证和加密 最近看了一个名为go-auth的库,它将JWT作为HTTP cookie对用户进行验证,但这个例子中缺少了对JWT的保护,由此进行了一些针对JWX的研究. 下面描 ...
- DrCush_0813_风湿性疾病, 药物和新冠指南
风湿性疾病, 药物和新冠指南 原文网址: https://rheumnow.com/news/rheumatic-diseases-drugs-and-covid-19-guidelines Jack ...
- Oracle 账户【2023/2/5最新】
下载Oracle产品一般都需要登录Oracle账户才可以下载,这里提供一个账户方便大家使用,觉得有用的希望能点个小小的赞! 账号:191049742@qq.com 密码:1234qwerASDF!@# ...
- Android:DrawerLayout 抽屉布局没有反应
<androidx.drawerlayout.widget.DrawerLayout android:id="@+id/drawer_layout" android:layo ...