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

admin8年前技术文档1896

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

分享到:

相关文章

ThinkPHP分页的实现

分页类需要和查询相结合,我们可以使用ThinkPHP自带的limit方法或者page方法,目的就是为了获取当前分页的数据(也有先获取完整数据然后前端分页显示的方法,不在本文描述内容中,也不建议)。使用...

Vue.Draggable使用文档总结

Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。 关于Vue.Draggable详细信息可以查看github地址特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表...

php 在web端来播放amr语音(如微信语音)

说下整体思路1、服务器安装ffmpeg2、使用ffmpeg -i 指令来转换amr为mp3格式(这个到时候写在PHP代码中,使用system函数执行即可)3、在网页端使用HTML5的audio标签来播...

Windows7 x64系统下安装Nodejs并在WebStorm 9.0.1下搭建编译less环境

Windows7 x64系统下安装Nodejs并在WebStorm 9.0.1下搭建编译less环境

Node.js v0.10.26 稳定版发布: http://www.oschina.net/news/48999/node-js-0-10-261、 打开Nodejs官网http://ww...

php利用百度地图API进行IP定位和GPS定位

最 近在做一个手机端的webapp地图应用,而核心内容当然是定位了,但是定位的话有几种方式,IP定位,GPS定位,基站定位(这个貌似webapp用不 了), 那么剩下核心的gps定位和ip定位了,...

解析PHP跳出循环的方法以及continue、break、exit的区别介绍

PHP中的循环结构大致有for循环,while循环,do{} while 循环以及foreach循环几种,不管哪种循环中,在PHP中跳出循环大致有这么几种方式:代码:复制代码代码如下:<?php...

发表评论    

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