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

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无效的解决方案” 的相关文章

抓取最近八天天气(非利用接口,直接从网站提取)

<?php    /*     *特别注意,第一天没有最高气温数据,第八天没有最低气温数据     *注意对数字进行过滤时不要忘记对负号进行判断   &nb...

利用ctrl+v实现粘贴截图完成上传功能

<?php header("Access-Control-Allow-Origin:*"); $url  = 'http://'.$_SERVER['HTTP_HOST']; $file =&nb...

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

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

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

jQuery UI 使用入门

jQuery UI 使用入门

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

Discuz!二次开发必备知识——DZ程序文件目录含义

分类: DZ程序文件目录含义基于7.0的标准程序,部分与插件无关的文件不作说明文件颜色说明:红色:程序核心文件,修改这类文件时千万要注意安全!橙色:做插件几乎不会用到的文件,大概了解功能就可以了,其实我也不推荐修改这些文件绿色:函数类文件,许多功能强大的自定义函数可以调用这类文件来...

PHP数组和Json之间的转换

        之所以要用到Json,很多时候是因为使用ajax对象时,程序与JS函数之间的数据交互。因为JS不认识PHP中的数组,PHP也不认识JS中的数组或对象。Json很好的解决了这个问题。Json简介  ...

发表评论

访客

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