最近在做一个模拟微信聊天页面的小程序,在使用<scroll-view>组件的
scroll-into-view属性使页面自动滚动到页面最底部的时候,发现经常出现滚了一半又滚回去了。后来发现是因为我发出一条消息之后服务器会立刻返回一条消息,短时间内改变了 scroll-into-view 的值两次,而微信所有的方法都是异步的,有可能左侧的消息比较长,向下滚动了一半的时候右侧出发了滚动事件,又被滚回去了。
最后解决方法是加了一个scrolltopFlag做判断,如果是右侧消息就直接修改scroll-into-view的值滚动,如果是左侧消息,就设置一个延迟,试了下300ms差不多够用。
小程序.wxml
<scroll-view class="scrool-view" id='keyWords'
scroll-y="true" scroll-with-animation="true"
scroll-into-view="{{scrolltop}}" enable-back-to-top="true">
<block wx:for="{{chatList}}" wx:key="time">
<view wx:if='{{item.orientation == "r"}}'>
右侧消息
</view>
<view wx:if='{{item.orientation == "l"}}'>
左侧消息
</view>
</block>
</scroll-view>
小程序.js
if (scrolltopFlag) {
setTimeout(function () {
that.setData({
chatList: chatListData,
scrolltop: "roll" + charlength,
});
}, 300)
} else {
that.setData({
chatList: chatListData,
scrolltop: "roll" + charlength,
});
}
模拟聊天的逻辑也很简单,js控制往list里添加数据,带上一个控制显示在左边还是右边的标签即可。
把做好的小程序也贴出来,顺便给公司打个广告。
想要创业的朋友看过来。
版权声明:本文为TrZoey原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。