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系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
js实现小时钟效果
Mar 25 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
popdiv
2006/07/14 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python常用的json标准库
2019/02/19 Python
openCV提取图像中的矩形区域
2020/07/21 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
创建卫生先进单位实施方案
2014/03/10 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
解析MySQL binlog
2021/06/11 MySQL
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript