MUI - Scroll插件的使用
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插件的使用的更多相关文章
- MUI 滚动插件使用
在Vue中 使用MUI滚动插件 官方文档地址:http://dev.dcloud.net.cn/mui/ui/#scroll 示例:初始化scroll控件: mui('.mui-scroll-wrap ...
- 开发自己的One Page Scroll插件(二)
开发自己的One Page Scroll插件(一) 5. 在其他浏览器中的特性 我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈.我的开发模式是不断的迭代.在开始的时候,我不会太关 ...
- vue-scroller的使用 && 开发自己的 scroll 插件
vue-scroller的使用 在spa开发过程中,难免会遇到使用scroll的情况,比如下面的: 即,当用户选择好商品之后,点击购物车,就会有一个购物车弹窗,如果选择的商品小于三个,刚好合适,如果多 ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- 一个mui扩展插件mui.showLoading加载框【转】
转:http://ask.dcloud.net.cn/article/12856 写在前面:好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件,为了统一组件样式和体验,写 ...
- MUI scroll 定位问题
做一个微信项目,使用MUI做框架,在使用scroll定位的时候,出现了定位不准确的问题,查询了好多资料,得知他是相对定位.折腾了好久,才搞定,现在做一个笔记. mui('body').on('tap' ...
- mui日期插件$, each遍历,EventListener事件监听,json格式
(function($) { $.init(); var result = $('#result')[0]; var btns = $('.btn'); btns.each(function(i, b ...
- MUI组件四:选择器、滚动条、单选框、区域滚动和轮播组件
目录(?)[+] 1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*pop ...
- Infinite Scroll–无限分页
一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...
随机推荐
- angularjs 指令(directive)详解(2)
原文地址 上一篇我们说到了transclude,那么,我们现在继续讲解之后的内容. 9.scope 可选参数,默认值为false.取值: false - 在这个directive里不会创建新的scop ...
- 修改PHP网站默认首页
一般默认的首页文件是index.php index.php3 index.html index.htm之类的,要想修改为myNewIndex.php, 进入服务器Apache目录,找到httpd.co ...
- vsftp 一键安装包
http://pan.baidu.com/s/1mibAJC8
- .NET委托解析
委托这个概念其实我们都很熟悉了,但是在使用的时候很多人还是无法去把控它,我们可以试想一下,在平时编码的时候,你是直接按照业务逻辑直接创建类,new出一个对象来进行操作的还是说有用到委托来更高效的完成一 ...
- poj 2236 并查集
并查集水题 #include<cstdio> #include<iostream> #include<algorithm> #include<cstring& ...
- Inno setup 简单打包教程
转自:http://blog.csdn.net/ruifangcui7758/article/details/6662646 前段时间关注了VC6.0自带的Installshield打包的使用方法,感 ...
- python安装requests (win7 & centos7)
下载地址: http://pypi.python.org/pypi/requests/只有tart.gz包 解压后,进入目录,安装命令: python setup.py install 会出现:Imp ...
- DEDECMS教程:上/下一篇文章标题长度的截取方法
对dedecms了解的朋友们,想必对如何获取上一篇.下一篇文章的标签也是非常熟悉.dedecms获取上一篇.下一篇文章的标签分别为:{dede:prenext get='pre'/}.{dede:pr ...
- Android的ListView详解
在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示.抽空把对ListView的使用做了整理,并写了个小例子,如下图. 列表的显示需要三 ...
- Hark的数据结构与算法练习之多路归并排序
算法说明 多路归并排序也叫k路归并排序,实际上是归并排序的扩展版,同样也是归并排序的一种,通常的应用场景的针对大数据量的排序. 实现过程: 1.从字面可以看出,多路归并就是将待排的大数据量分成K路,然 ...