http://dev.dcloud.net.cn/mui/ui/#scroll

神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom对象,具体demo为:http://www.cnblogs.com/CyLee/p/5324224.html

神坑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(,,);//100毫秒滚动到顶

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

mui();//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插件的使用的更多相关文章

  1. MUI 滚动插件使用

    在Vue中 使用MUI滚动插件 官方文档地址:http://dev.dcloud.net.cn/mui/ui/#scroll 示例:初始化scroll控件: mui('.mui-scroll-wrap ...

  2. 开发自己的One Page Scroll插件(二)

    开发自己的One Page Scroll插件(一) 5. 在其他浏览器中的特性 我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈.我的开发模式是不断的迭代.在开始的时候,我不会太关 ...

  3. vue-scroller的使用 && 开发自己的 scroll 插件

    vue-scroller的使用 在spa开发过程中,难免会遇到使用scroll的情况,比如下面的: 即,当用户选择好商品之后,点击购物车,就会有一个购物车弹窗,如果选择的商品小于三个,刚好合适,如果多 ...

  4. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  5. 一个mui扩展插件mui.showLoading加载框【转】

    转:http://ask.dcloud.net.cn/article/12856 写在前面:好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件,为了统一组件样式和体验,写 ...

  6. MUI scroll 定位问题

    做一个微信项目,使用MUI做框架,在使用scroll定位的时候,出现了定位不准确的问题,查询了好多资料,得知他是相对定位.折腾了好久,才搞定,现在做一个笔记. mui('body').on('tap' ...

  7. mui日期插件$, each遍历,EventListener事件监听,json格式

    (function($) { $.init(); var result = $('#result')[0]; var btns = $('.btn'); btns.each(function(i, b ...

  8. MUI组件四:选择器、滚动条、单选框、区域滚动和轮播组件

    目录(?)[+]   1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*pop ...

  9. Infinite Scroll–无限分页

    一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...

随机推荐

  1. iOS 关于Layer的疑问

    很久很久以前,就对ios的Layer十分的不解,学习了android后,打算通过android中的相关实现,分析一下ios中layer的作用,结果没有找到android中的对应的内容!十分让人郁闷.于 ...

  2. ubuntu命令行相关命令使用心得

    一.Ubuntu解压缩zip,tar,tar.gz,tar.bz2 ZIP zip可能是目前使用得最多的文档压缩格式.它最大的优点就是在不同的操作系统平台,比如Linux, Windows以及Mac ...

  3. UVALive 7269 Snake Carpet (构造)

    题目:传送门. 题意:构造出一个矩阵,使得矩阵含有n条蛇,每条蛇的长度是1到n,并且奇数长度的蛇有奇数个拐弯,偶数长度 的蛇有偶数个拐弯. 奇数和偶数分开构造,奇数可以是: 1357 3357 555 ...

  4. vector.end() 指向的节点

    存储器vector, vector.end() 指向的是最后的结束符,而不是最后一个元素.

  5. myeclipse中的js文件报错

    方法一:myeclipse9 很特殊 和 myeclipse10 不一样,所以myeclipse9 不能使用该方法. 方法二: 为了做一个页面特效,导入了一个jquery文件,怎想,myeclipse ...

  6. WW_TRANS_I18N_LOCALE”与“WW_TRANS_I18N_LOCALE”属性

    Struts2 i18n国际化(允许用户自行选择语言)转最近在学习struts2,学习资料是李刚著的<struts2权威指南>,这本书写得非常好,非常有学习价值.我在学习过程中,自己跟着做 ...

  7. 【转】一个不错的eclipse反编译插件

    [转]一个不错的eclipse反编译插件 在CSDN论坛上看到的一个不错的eclipse反编译插件,感觉看起来不错的样子,因而记下,原网址是:http://topic.csdn.net/u/20121 ...

  8. DDL, DML不是所有SQL都是可以自动回滚的

    因为DDL没有事务性,所以DDL不能回滚. 要实现自动回滚.(begin,commit,rollback),则SQL语句中只能包括DML. 这样,自动化发布就会受限规范格式. 故而,一刀切的办法是,假 ...

  9. phpcms-v9中建立wap手机站点

    web网站用的是phpcms v9搭建的,为了方便手机用户浏览网站,于是用phpcms v9自带的手机门户模块搭建了个wap站(http:.org换成你的wap网站域名----------- 到这一步 ...

  10. struts2的标签中得到JSP脚本的变量值

    转自:http://www.cnblogs.com/modou/articles/1299024.html 大家先来看一段代码: <% int i=1; %> <s:property ...