1***@qq.com
1***@qq.com
  • 发布:2017-09-07 16:49
  • 更新:2021-12-13 13:55
  • 阅读:7675

做聊天页面scroll,页面无法滑动有关之坑,经验之谈分享一下

分类:MUI

聊天功能相关实现了,但是页面一进去就无法滑动,发送一条消息才会好,滚动也卡顿。需求是进入聊天动态加载记录应该定位到底部。
一、聊天内容块外面套上框架的滚动div
<div class="mui-scroll-wrapper"style="padding:50px 0">
<div class="mui-scroll">
<div id='你的内容'> </div>
</div>
</div>
二、js中初始化scroll控件。
mui('.mui-scroll-wrapper').scroll({deceleration: 0.0005 });
三、加载好数据后,后面调用这两个方法,一定要调用reLayout,害人不浅!
mui('.mui-scroll-wrapper').scroll().reLayout();
mui('.mui-scroll-wrapper').scroll().scrollToBottom(1000);//毫秒,滚动到底部需要的时间,可自定义。
搞定,滑动和页面初始定位都好用了
之前报错:Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.这个具体原因算不算控件bug不知道,遇见了也不要方,该包的包起来就行了。
(os:之前的坑还有很多,但是没有记录过,以后再遇见奇葩and一搜索不知所云的问题还会来分享的~)

3 关注 分享
1***@qq.com 8***@qq.com skysowe

要回复文章请先登录注册

skysowe

skysowe

加了reLayout,好用了,感谢!
2021-12-13 13:55
1***@qq.com

1***@qq.com

我的这个文章里边有简单的示例,逻辑可以很好的实现自动定位到底部,只需要在页面创建时,加载数据,调用相关方法即可 https://ask.dcloud.net.cn/article/37296
2020-05-28 09:54
d2y

d2y

老哥, uniapp 下怎么做一个 im 聊天自定底部?
2019-09-09 10:55
1***@163.com

1***@163.com

Uncaught TypeError: mui(...).scroll(...).reLayout is not a function at models/indexs/indexs.js:105,报错呢
2019-09-05 20:13
1***@163.com

1***@163.com

还是不能滑动。。。
2019-09-05 20:11
j***@163.com

j***@163.com

还是不能滑动。。。
2018-07-12 15:26
6***@qq.com

6***@qq.com

楼主在不?我用vue绑定数据,数据加载完后就是不到底部?能解答不?
2018-01-09 17:03
1***@qq.com

1***@qq.com (作者)

回复 1***@qq.com :
哈哈,遇见问题总是找不到正解,之前遇见的都写下来会有很多。。
2017-10-10 09:31
1***@qq.com

1***@qq.com

楼主写的多好!!!多谢楼主!
2017-10-08 21:31