MUI Scroll插件的使用详解

2024-12-01 15:05:57

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

神坑1：如果在vuejs中使用，那么需要配合mui.ready(function(){}) 才能找到dom对象，具体demo为：

https://www.jb51.net/article/111085.htm

神坑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插件的使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

mui上拉加载功能实例详解

最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" > <script src="js/jquery-3.2.0.min.js"></script> <script src="com
jQuery基于muipicker实现仿ios时间选择

首先我们先来看原始的muipicker的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
MUI Scroll插件的使用详解

http://dev.dcloud.net.cn/mui/ui/#scroll 神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom对象,具体demo为: http://www.jb51.net/article/111085.htm 神坑2:scrollTo每次移动的距离,是相对于当前打距离的移动的,而不是移动到绝对的距离. scroll(区域滚动) 在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题: Androi
MUI Scroll插件的使用详解

http://dev.dcloud.net.cn/mui/ui/#scroll 神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom对象,具体demo为: https://www.jb51.net/article/111085.htm 神坑2:scrollTo每次移动的距离,是相对于当前打距离的移动的,而不是移动到绝对的距离. scroll(区域滚动) 在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题: Andro
Mybatis分页插件的实例详解

Mybatis分页插件的实例详解 1.前言: 我们知道,在MySQL中,分页的sql是使用limit来做,如果我们自己写sql,那分页肯定是没有任何问题的.但是一旦model多了起来,复杂了起来,我们很自然的想到使用mybatis的逆向工程来生成相应的po和mapper,但是同时也会带来弊端,比如这里的分页问题就不好解决了. 可能有人会说,我可以修改生成的文件,没错,这是可行的,但是一般我们通过逆向工程生成的文件,都不会去动它,所以这个时候,就需要使用分页插件来解决了. 如果你也在用Mybati
Bootstrap 折叠（Collapse）插件用法实例详解

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.下面通过本文给大家介绍Bootstrap 折叠(Collapse)插件用法实例,一起看看吧! 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时,也需要在您的 Bootst
jQuery的图片轮播插件PgwSlideshow使用详解

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides
jQuery表单插件ajaxForm实例详解

前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t
微信扫码支付零云插件版实例详解

微信扫码支付零云插件版实例详解微信的扫码支付主要有以下过程: 向微信统一下单地址发送详细的订单信息,微信返回json数据,里面包含生成二维码的字段,使用生成二维码的插件qrcode生成二维码返回给前端,让用户扫码完成支付,然后页面跳转到return_url告知用户支付成功,微信服务器正式通知支付成功之后修改数据库数据. //Pay类下的主要方法 public function buildRequestForm($pay_data){ $UNIFIED_ORDER_URL = 'weixin:/
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/
Intellij IDEA 配置Subversion插件实现步骤详解

Intellij IDEA 配置Subversion插件实现步骤详解在使用Intellij的过程中,突然发现svn不起效了,在VCS–>Checkout from Version Control中也未发现Subversion这一项.如下图: 一.原因查找经过分析是因为插件被禁用或移除导致此功能失效. 二.解决方案打开Settings,Plugins,搜索Subversion,在筛选出结果的方框上打勾,即可启动插件.如下图: 三.使用方法点击VCS–>Enable Version -.-
vue中引用swiper轮播插件的教程详解

有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

MUI Scroll插件的使用详解

相关推荐

随机推荐