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) }最后看页面得效果 谢谢支持
