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 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
jQuery之动画效果大全
Nov 09 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
微信小程序实现图片上传
May 23 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 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+DBM的同学录程序(1)
2006/10/09 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
PHP反向代理类代码
2014/08/15 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php实现算术验证码功能
2018/12/05 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
快速了解Python中的装饰器
2018/01/11 Python
python去除扩展名的实例讲解
2018/04/23 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python中的协程深入理解
2019/06/10 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
自我评价范文
2013/12/22 职场文书
广告业务员岗位职责
2014/02/06 职场文书
谢师宴答谢词
2015/01/05 职场文书
2016春节慰问信范文
2015/03/25 职场文书
法定授权委托证明书
2015/06/18 职场文书
python如何在word中存储本地图片
2021/04/07 Python