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 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 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 array_multisort()函数的使用札记
2011/07/03 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
js时间日期和毫秒的相互转换
2013/02/22 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JavaScript中this详解
2015/09/01 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
重构Python代码的六个实例
2020/11/25 Python
python 图像增强算法实现详解
2021/01/24 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
传播学专业毕业生自荐信
2013/11/04 职场文书
美工的岗位职责
2013/11/14 职场文书
实习生自我评价
2014/01/18 职场文书
信用卡工作证明模板
2014/09/14 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
办公室规章制度范本
2015/08/04 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js