微信小程序scroll-view無法準確滾動到頁面最底部

最近在做一個模擬微信聊天頁面的小程序，在使用<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裏添加數據，帶上一個控制顯示在左邊還是右邊的標籤即可。

 

把做好的小程序也貼出來，順便給公司打個廣告。

想要創業的朋友看過來。