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 相关文章推荐
JS面向对象编程浅析
Aug 28 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jquery中post方法用法实例
Oct 21 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
深入理解js数组的sort排序
May 28 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
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中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
用matplotlib画等高线图详解
2017/12/14 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
《夏夜多美》教学反思
2014/02/17 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
服装设计师求职信
2014/06/04 职场文书
清洁员岗位职责
2015/02/15 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
运动会宣传语
2015/07/13 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书