1.再做微信小程序聊天得時候,聊天得消息比較多,所以需要每次將滾動框移到最底部。剛開始試了 scroll-top ,等都無效。最後決定使用scroll-into-view 也無效。
2.解決辦法:scroll-into-view 指向得view得id 須要再整個頁面加載完後纔有效,所以再列表得數組賦值完後,再給 scroll-into-view指向得變量賦值才行。另外 scroll-view 得高度也必須給一個指定得值,不然滾動條無法移動。具體遇到得坑就這兩個。
3.具體看看代碼
test.wxml
<scroll-view scroll-y="true" scroll-into-view="{{ toView }}" style="height:1200rpx;">
<view class='scrollMsg'>
<block wx:key wx:for='{{msgList}}' wx:for-index="index" >
<!-- 單個消息1 客服發出(左) -->
<view wx:if='{{item.ToId==user.id}}' id='msg-{{index}}' class='kefu-view'>
<view class='kefu-view-avator-view'>
<image class='kefu-view-avator-view-img' src='{{session.FromUserImage}}'></image>
</view>
<view class='kefu-msg-view'>
<image class='.kefu-msg-view-img' src='/images/goods_left_msg.png' mode='widthFix'></image>
</view>
<!-- 無商品消息 -->
<view class='left-msg'>
{{item.Content}}
</view>
</view>
</view>
</view>
</scroll-view>
js部分代碼
if (method == 'messageList') {
var message=JSON.parse(res.message)
console.log(message)
var list = that.data.msgList.concat(message || [])
that.setData({
msgList: list,
})
setTimeout(function () {
that.setData({
toView: "msg-" + (list.length - 1),
})
}, 100)
}
最後看頁面得效果