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

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

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

一个类似于聊天的效果,要求数据加载完成后,滚动条必须在最后。但是,如果数据是原始数据的话,使用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

分享到:

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

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

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

分享给朋友:

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

安卓刷机教程

 安卓手机刷机教程,体验不一样的新系统。    一:刷机准备与介绍  首先简单介绍下刷机吧,所谓的刷机,不纯指刷新的系统,其中还包括刷Recovery(也叫CWM或者工程模式),基带(你可以理解为电脑驱动 类),ROM(系统哦),SPL(你...

php 判断手机访问

//手机来访 function is_mobile() {     $user_agent = $_SERVER['HTTP_USER_AGENT'];    &n...

图文解说Navicat使用ssh方式连接远程MySql服务器

图文解说Navicat使用ssh方式连接远程MySql服务器

如何使用Navicat 8.0 for MySQL连接公司服务器的数据库,但我也是第一次接触这个软件,搞了半天也没连上,在网上找了很多解决的办法,其中就有使用ssh方式连接的,但写的不够详细,因此还是费了一番功夫,自己搞定的,不敢独享,特记录下来 与大家分享。首先,在Navicat的连接设置里选择S...

jQuery编程的最佳实践

加载jQuery1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢。点击查看使用CDN的好处,点此查看一些主流的jQuery CDN地址。<script type="text/javascript" src="...

wamp下虚拟主机的配置

1  编辑httpd.conf,查找Include conf/extra/httpd-vhosts.conf,把前面注释符号“#”删掉。 2  编辑httpd-vhosts.conf,我把WAMPServer安装在D:/wamp,所以我这里的路径是D:\wamp\Apache2\...

wamp虚拟主机配置

1、首先打开apache的配置文件httpd.conf,并去掉#Include conf/extra/httpd-vhosts.conf前面的#,启用虚拟主机功能2、先把localhost配置好,免得以后访问localhost出现问题,我的wamp项目根目录是D:\wamp\www。将下面信息添加到...

发表评论

访客

看不清,换一张

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