微信小程序中 scroll-view滚动条始终在最底部

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)
      }

最后看页面得效果
在这里插入图片描述
在这里插入图片描述
谢谢支持

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值