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.在页面下方有一个“点击加载 ...
随机推荐
- iOS 关于Layer的疑问
很久很久以前,就对ios的Layer十分的不解,学习了android后,打算通过android中的相关实现,分析一下ios中layer的作用,结果没有找到android中的对应的内容!十分让人郁闷.于 ...
- ubuntu命令行相关命令使用心得
一.Ubuntu解压缩zip,tar,tar.gz,tar.bz2 ZIP zip可能是目前使用得最多的文档压缩格式.它最大的优点就是在不同的操作系统平台,比如Linux, Windows以及Mac ...
- UVALive 7269 Snake Carpet (构造)
题目:传送门. 题意:构造出一个矩阵,使得矩阵含有n条蛇,每条蛇的长度是1到n,并且奇数长度的蛇有奇数个拐弯,偶数长度 的蛇有偶数个拐弯. 奇数和偶数分开构造,奇数可以是: 1357 3357 555 ...
- vector.end() 指向的节点
存储器vector, vector.end() 指向的是最后的结束符,而不是最后一个元素.
- myeclipse中的js文件报错
方法一:myeclipse9 很特殊 和 myeclipse10 不一样,所以myeclipse9 不能使用该方法. 方法二: 为了做一个页面特效,导入了一个jquery文件,怎想,myeclipse ...
- WW_TRANS_I18N_LOCALE”与“WW_TRANS_I18N_LOCALE”属性
Struts2 i18n国际化(允许用户自行选择语言)转最近在学习struts2,学习资料是李刚著的<struts2权威指南>,这本书写得非常好,非常有学习价值.我在学习过程中,自己跟着做 ...
- 【转】一个不错的eclipse反编译插件
[转]一个不错的eclipse反编译插件 在CSDN论坛上看到的一个不错的eclipse反编译插件,感觉看起来不错的样子,因而记下,原网址是:http://topic.csdn.net/u/20121 ...
- DDL, DML不是所有SQL都是可以自动回滚的
因为DDL没有事务性,所以DDL不能回滚. 要实现自动回滚.(begin,commit,rollback),则SQL语句中只能包括DML. 这样,自动化发布就会受限规范格式. 故而,一刀切的办法是,假 ...
- phpcms-v9中建立wap手机站点
web网站用的是phpcms v9搭建的,为了方便手机用户浏览网站,于是用phpcms v9自带的手机门户模块搭建了个wap站(http:.org换成你的wap网站域名----------- 到这一步 ...
- struts2的标签中得到JSP脚本的变量值
转自:http://www.cnblogs.com/modou/articles/1299024.html 大家先来看一段代码: <% int i=1; %> <s:property ...