`

MUI scroll(区域滚动)问题

    博客分类:
  • MUI
阅读更多

                                                 MUI scroll(区域滚动)问题

1)在手机APP上,我们需要进行组件的滑动或者定位,可能会出现滑动方法不起作用。

例如:

功能:滚动到特定位置

方法:scrollTo( xpos , ypos [, duration] )

案例:mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶

 

可是有时候我们使用该方法是不起作用的,注意观察发现,

是由于mui('.mui-scroll-wrapper').scroll().maxScrollX为0,当该值显示为我们需要的后,该方法功能才起作用。

 

2)我以为是scroll组件需要初始化,就调用了初始化方法:

mui('.mui-scroll-wrapper').scroll({

scrollY: true, //是否竖向滚动

scrollX: false, //是否横向滚动

startX: 0, //初始化时滚动至x

startY: 0, //初始化时滚动至y

indicators: true, //是否显示滚动条

deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006

bounce: true //是否启用回弹

});

然后再调用,依然不好使。

 

3)参考MUI官方文档,没发现可使用的滑动方法,后来查看该组件的源代码,

发现该组件还有一个内部的方法:setTranslate(x,y),只要将scrollTo(0,0,100)方法换成setTranslate(x,y)方法就可以达到效果了。

 

ps:MUI还是存在一定的bug,官方帮助文档仅供参考。

分享到:
评论

相关推荐

    MUI Scroll插件的使用详解

    **MUI Scroll插件**是DCloud(5+ App)框架中的一个核心组件,它主要用于解决在移动设备上实现高效且流畅的div区域滚动。在Android和iOS平台上,原生的div滚动支持存在一些问题,比如在某些Android版本下不支持div...

    mui滚动条 的实现源代码

    3. **区域滚动到底部显示不完全**:"Mui 区域滚动scroll底部显示不完全的问题"表明在滚动到内容底部时,可能存在部分内容没有完全显示。这可能是由于布局、定位或者内边距问题导致的,需要检查相关CSS属性并调整。 ...

    Vue cli+mui 区域滚动的实例代码

    写结构 mui的区域滚动结构是这样的 <div class=mui-scroll-wrapper> <div class=mui-scroll> *写需要滚动的内容 </div> 下面粘贴我代码的一部分 <div class=goods_foods mui-scroll-wrappe

    mui框架 页面无法滚动的解决方法(推荐)

    当遇到Mui框架下的页面无法滚动的问题时,首先要考虑的原因可能是滚动功能没有正确初始化。Mui框架提供了一个滚动组件,用于实现页面或特定区域的滚动效果。在页面加载完成后,需要调用`mui.init()`来初始化整个框架...

    mui 上拉下拉刷新功能

    8. 滚动区域:滚动区域是指 mui-scroll 元素,它是上拉下拉刷新的滚动区域。 四、Mui 上拉下拉刷新功能的优点 1. 提高用户体验:Mui 上拉下拉刷新功能可以提供更好的用户体验,用户可以快速刷新页面的内容。 2. ...

    MUI选项卡下拉刷新上拉加载demo

    HTML结构通常包括`<div class="mui-content">`作为主要内容区域,内部可能包含多个`<div class="mui-scroll-wrapper">`,每个都代表一个可滚动的数据列表。`<ul>`元素用于显示加载的数据,`<li>`元素则是列表项。 ...

    完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    总的来说,解决Mui框架off-canvas侧滑菜单超出部分隐藏无法滚动的问题,可以通过增强内容容器的滚动能力或利用子页面功能来实现。这两种方法各有优缺点,可以根据项目的实际需求和结构来选择最合适的一种。通过这样...

    mui选项卡切换和下拉刷新加载数据列表代码.rar

    `mui`同样提供了一个组件`mui.scroll`来实现这一功能。基本使用方法如下: ```javascript mui.init({ scroll: { up: { callback: function() { // 加载更多数据的逻辑 } } } }); ``` 在这个例子中,当用户...

    微信小程序----机场索引列表(MUI索引列表)

    监听`<scroll-view>`的`bindscroll`事件,当滚动位置改变时,检查当前可视区域的首尾元素,更新索引栏的选中状态。可以使用`Math.floor()`和数组方法找到最近的字母,然后更新对应的索引项的高亮状态。 7. **性能...

    无缝滚动改进版支持上下左右滚动(封装成函数)

    - `#scroll` 定义了整个滚动区域的样式,包括宽度、外边距和相对定位。 - `.btn` 是滚动按钮的样式,通过绝对定位使其在滚动区域的上下两端。 - `.content` 是实际滚动内容的容器,设置高度为440px并隐藏溢出部分...

    jQuery侧边导航锚点定位代码.zip

    结合jQuery,我们可以监听滚动事件,当滚动到某个锚点时,使侧边导航高亮显示对应的菜单项,这样用户就可以清楚地知道当前在哪个内容区域。 在这个项目中,`mui框架`被用作基础。Mui是一个轻量级的前端开发框架,它...

    MUI 实现侧滑菜单及其主体部分上下滑动的方法

    为了实现滚动效果,我们需要为菜单部分和内容部分分别添加`mui-scroll-wrapper`类,并为它们指定唯一的ID,例如`offCanvasSideScroll`和`offCanvasContentScroll`。 接下来,为了让侧滑菜单和内容部分可以滑动,...

    mui上拉加载更多下拉刷新数据的封装过程

    在示例中,可以看到一个`<div id="refreshContainer">`作为下拉刷新和上拉加载的容器,其中包含一个`<div class="mui-scroll">`作为滚动区域,以及一个`<ul class="mui-table-view mui-table-view-chevron" id="list...

    mui上拉加载功能实例详解

    在本例中,容器`#pullrefresh`是上拉加载功能的触发区域,它包含一个`.mui-content`类和`.mui-scroll-wrapper`类,以及一个内部的`.mui-scroll`和`.mui-table-view`元素。`.mui-table-view`是用于展示数据的列表视图...

    手机移动端Tab选项卡切换带下拉数据异步加载js插件

    - 下拉加载,又称无限滚动或动态加载,是指用户滚动页面到底部时,更多内容自动加载到当前视图中。这种方式节省了页面加载时间,减少了初次加载的数据量,尤其适用于数据量庞大的应用。 3. **异步加载** - 异步...

    微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    微信小程序中的MUI导航栏透明渐变功能是一种常见的视觉设计,它能够提供流畅的用户体验,特别是在页面滚动时,导航栏的透明度会随着用户滚动页面而逐渐变化。这一效果主要通过调整背景颜色的RGBA值来实现,特别是...

    jQuery网页定位导航特效实现方法

    这种特效使得用户在滚动页面时,导航菜单能够根据当前浏览的位置自动高亮相应的链接,同时点击导航项可以快速跳转到对应的内容区域。 本文实例中提到的实现方法分为两大部分:点击导航项切换内容和滚动时自动高亮...

Global site tag (gtag.js) - Google Analytics