聊天记录内容不自动滚动到最底部

wsw9284

1)、因为聊天记录是从融云获取到的数据，所以数据获取需要花费一些时间，可是如果用api.pageDown()就会先执行，这里数据还没有来得及填充到x-dot-template.
2）、当所有聊天记录已经显示以后，我点击发送内容时，聊天记录里的内容也没有自动滚到最底部，同样当我再发信息的时候也不会自动滚动到最底部，造成看不到我收到的信息到底是什么。
三个功能图如下：






各个代码如下：

杨昌远

1. var frameht = api.frameHeight;//获取全局窗口高度
   
2. //监听键盘聊天框键盘弹出,用于调整聊天窗口高度
   
3.         UIChatBox.addEventListener({
   
4.                     target: 'inputBar',
   
5.                     name: 'move'
   
6.                 }, function(ret,err){
   
7.                   
   
8.                     if(ret.panelHeight>0){       
   
9.                             api.setFrameAttr({
   
10.     name: 'chat_frm',
    
11.     rect: {
    
12.                 h:frameht-ret.panelHeight
    
13.             },
    
14. });
    
15.                     }else{
    
16.                     api.setFrameAttr({
    
17.     name: 'chat_frm',
    
18.     rect: {
    
19.                 h:frameht
    
20.             },
    
21. });
    
22.      
    
23.                     }
    
24.                     
    
25.    setTimeout(function(){
    
26.                             window.scrollTo(0,$api.offset($api.byId("contact")).h);
    
27.                     },20)
    
28.                     
    
29.                 });
    
30. 
    

复制代码

这是我app里的代码 你看下吧

杨昌远

wsw9284 发表于 2016-5-31 11:20
利用window.scrollTo(0, document.body.scrollHeight);解决了，谢谢回复！
不过当输入内容时，下面的输入 ...

监听键盘弹出 ， 动态改变 frame的高度即可

wsw9284

杨昌远 发表于 2016-5-31 11:27
监听键盘弹出 ， 动态改变 frame的高度即可

这个敢做了，可是没有反应，请看代码：

wsw9284

杨昌远 发表于 2016-6-1 11:49
这是我app里的代码 你看下吧

受到你的启发，我解决了此问题，非常感谢！再次感谢

wsw9284

思路：当监听到输入框时改变时动态改变frame的同时发送一个事件给聊天内容页，聊天内容页监听到后自动向上滚动！完美解决

2010jing

wsw9284 发表于 2016-5-31 11:20
利用window.scrollTo(0, document.body.scrollHeight);解决了，谢谢回复！
不过当输入内容时，下面的输入 ...

请问                     window.scrollTo(0, document.body.scrollHeight);
是添加在哪个地方？？

leungkingman

精华帖，受教了，谢谢

wsw9284

2010jing 发表于 2016-9-8 15:08
请问                     window.scrollTo(0, document.body.scrollHeight);
是添加在哪个地方？？  ...

直接放在innerHtml的后面，就是把动态数据填充到模板里面那里。要注意的一点是，如果内容数据量大特别是有图片内容的时候一定要加上等待时间！因为显示加载图片数据需要时间不象是文字，如果没有延迟时间利用window.scrollTo(0, document.body.scrollHeight);就不会起作用。但是如果使用：
setTimeout(function() {
                                window.scrollTo(0, document.body.scrollHeight);
                        }, 200)
肯定是没有问题的。

sdaini

楼主，你好，我现在遇到了相同的问题，我把帖子里的代码粘贴过去。只有第一次弹出输入框的时候起作用。再弹出来就不起作用。您能帮忙看看吗