MUI  Scroll插件的使用详解


Posted in Javascript onApril 13, 2017

神坑2:scrollTo每次移动的距离,是相对于当前打距离的移动的,而不是移动到绝对的距离。

scroll(区域滚动)

在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题:

  • Android平台4.0以下不支持div滚动
  • Android平台4.0以上支持div滚动,但不显示滚动条

弹出层的div滚动在iOS平台存在事件透传的问题

因此,mui额外提供了区域滚动组件,使用时需要遵循如下DOM结构

<div class="mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--这里放置真实显示的DOM内容-->
  </div>
</div>

 然后使用一下js

mui('.mui-scroll-wrapper').scroll({
          deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006 
});

一些常用scroll功能代码:

快速回滚到该区域顶部,代码如下:

神坑2:scrollTo每次移动的距离,是相对于当前的距离来移动的,而不是移动到绝对的距离。

mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶

滚动到顶部的代码比较容易实现,坐标值设为0、0即可;但滚动到底部,需要计算该区域的实际高度,因此mui封装了scrollToBottom方法。

mui('.mui-scroll-wrapper').scroll().scrollToBottom(100);//100毫秒滚动到底部

 关于我快速滑动demo:

神坑2:scrollTo每次移动的距离,是相对于当前的距离来移动的,而不是移动到绝对的距离。

所以通常的做法是根据当前的位置 - 将要抵达的位置,求出距离然后再进行移动,如以下的demo:

let index = $(e.event.target).index();
  let id = $(e.event.target).attr("href");
  let top = $(id).offset().top - 200; 
  let current_top = mui('#segmentedControlContents .mui-scroll-wrapper').scroll().y;
  top = current_top - top;
  mui('#segmentedControlContents .mui-scroll-wrapper').scroll().scrollTo(0,top,300);

以上所述是小编给大家介绍的MUI  Scroll插件的使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 #Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 #Javascript
mui上拉加载功能实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 #Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 #Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 #Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 #Javascript
You might like
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jquery移动节点实例
2015/01/14 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
在vue 中使用 less的教程详解
2018/09/26 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python实现多线程抓取妹子图
2015/08/08 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
总经理职责范文
2013/11/08 职场文书
新闻专业推荐信范文
2013/11/20 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
文明工地标语
2014/06/16 职场文书
小学生作文评语集锦
2014/12/25 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书