当前位置:首页 > 技术文档 > 正文内容

MUI动态加载数据后,scrollToBottom无效的解决方案

admin9年前 (2017-07-14)技术文档1919

一个类似于聊天的效果,要求数据加载完成后,滚动条必须在最后。但是,如果数据是原始数据的话,使用scrollToBottom是可以滚动到底部的。但是如果是动态数据的话,就无效了。

找了很多方法,官方QQ群里也问过了,解释的也不是很看的懂。最后没办法,只能去翻代码了。看了下scrollToBottom的方法定义中有一行是这样的:

this.scrollTo(0, this.maxScrollY, time, easing);

通过浏览器控制台获取maxScrollY的值很悲剧的为0!!!!!

而maxScrollY的获取就是在reLayout函数当中,于是乎,重新调用一下reLayout就可以更新maxScrollY了。完整的解决方案如下:

//页面加载后,初始化滚动条
var scroll = mui('.mui-scroll-wrapper').scroll();
//获取列表数据
$.post(apiURL, {}, function(data) {
    //插入列表
    insertDomByData(data);    //重新计算布局值,最大滚动的高度等等
    scroll.reLayout();    //滚动到底部
    scroll.scrollToBottom(100);
});

image.png

分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/240.html

分享给朋友:

“ MUI动态加载数据后,scrollToBottom无效的解决方案” 的相关文章

如何快速去除代码前的行号

如何快速去除代码前的行号...

dz中“QQ互联”出现Discuz! Database Error解决办法

dz中“QQ互联”出现Discuz! Database Error解决办法

dz中QQ登陆出现Discuz! Database Error解决办法dz站长朋友相信肯定有人遇到做的QQ互联登录,根本没法用,这让网站的社交登录性能大打折扣,这么解决?下面就看大神的神操作!...

jQuery UI 使用入门

jQuery UI 使用入门

 最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助。文章结尾附源码下载。1 jQuery UI        有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。直到...

推荐一些国内的Jquery CDN免费服务

Jquery是个非常流行的JS前端框架,在很多网站都能看到它的身影。很多网站都喜欢采用一些Jquery CDN加速服务,这样网站加载jquery会更快。之前火端网络的一些网站都是使用Google的jquery CDN,如:http://ajax.googleapis.com/ajax/lib...

ThinkPHP实现多数据库连接的解决方法

这篇文章主要介绍了ThinkPHP实现多数据库连接的解决方法,需要的朋友可以参考下ThinkPHP实现连接多个数据的时候,如果数据库在同一个服务器里的话只需要这样定义模型:?123class MembersModel extends Model{protected $trueTableName =...

CentOS minimal版安装图形界面的步骤

1、连接网络:CentOS minimal.iso安装好后,进入终端,默认是不开网络的,首先启用网卡, 自动获取ip.ifconfig eth0 up   www.2cto.com dhclient eth0这时候再 ifconfig 一下,就可以看见已经自动分配好IP...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。