Recently, I've been working on a small program that simulates a WeChat chat page, and I've been using the <scroll-view> components of theWhen the scroll-into-view property makes the page automatically scroll to the bottom of the page, I found that it often scrolls halfway and then scrolls back. Later, I realized that because the server will return a message immediately after I send a message, and change the value of scroll-into-view twice in a short period of time, and all the methods of WeChat are asynchronous, there is a possibility that the left side of the message is longer, and the right side of the message will leave the scroll event when it is half way down, and then it will be rolled back again.
The final solution is to add a scrolltopFlag to do the judgment, if it is the right side of the message directly modify the value of scroll-into-view scroll, if it is the left side of the message, set a delay, tried 300ms almost enough.
Applet.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='{{ == "r"}}'>
-
Right message
-
</view>
-
-
<view wx:if='{{ == "l"}}'>
-
Left Message
-
</view>
-
-
</block>
-
-
</scroll-view>
Applet.js
-
if (scrolltopFlag) {
-
setTimeout(function () {
-
that.setData({
-
chatList: chatListData,
-
scrolltop: "roll" + charlength,
-
});
-
}, 300)
-
} else {
-
that.setData({
-
chatList: chatListData,
-
scrolltop: "roll" + charlength,
-
});
-
}
Simulate the logic of the chat is also very simple, js control to add data to the list, with a control to display on the left or right side of the label can be.
Post the finished applet as well, and advertise the company in the meantime.
If you want to start your own business, look over here.
