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. angularjs 指令(directive)详解(2)

    原文地址 上一篇我们说到了transclude,那么,我们现在继续讲解之后的内容. 9.scope 可选参数,默认值为false.取值: false - 在这个directive里不会创建新的scop ...

  2. 修改PHP网站默认首页

    一般默认的首页文件是index.php index.php3 index.html index.htm之类的,要想修改为myNewIndex.php, 进入服务器Apache目录,找到httpd.co ...

  3. vsftp 一键安装包

    http://pan.baidu.com/s/1mibAJC8

  4. .NET委托解析

    委托这个概念其实我们都很熟悉了,但是在使用的时候很多人还是无法去把控它,我们可以试想一下,在平时编码的时候,你是直接按照业务逻辑直接创建类,new出一个对象来进行操作的还是说有用到委托来更高效的完成一 ...

  5. poj 2236 并查集

    并查集水题 #include<cstdio> #include<iostream> #include<algorithm> #include<cstring& ...

  6. Inno setup 简单打包教程

    转自:http://blog.csdn.net/ruifangcui7758/article/details/6662646 前段时间关注了VC6.0自带的Installshield打包的使用方法,感 ...

  7. python安装requests (win7 & centos7)

    下载地址: http://pypi.python.org/pypi/requests/只有tart.gz包 解压后,进入目录,安装命令: python setup.py install 会出现:Imp ...

  8. DEDECMS教程:上/下一篇文章标题长度的截取方法

    对dedecms了解的朋友们,想必对如何获取上一篇.下一篇文章的标签也是非常熟悉.dedecms获取上一篇.下一篇文章的标签分别为:{dede:prenext get='pre'/}.{dede:pr ...

  9. Android的ListView详解

    在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示.抽空把对ListView的使用做了整理,并写了个小例子,如下图. 列表的显示需要三 ...

  10. Hark的数据结构与算法练习之多路归并排序

    算法说明 多路归并排序也叫k路归并排序,实际上是归并排序的扩展版,同样也是归并排序的一种,通常的应用场景的针对大数据量的排序. 实现过程: 1.从字面可以看出,多路归并就是将待排的大数据量分成K路,然 ...