微信小程序中 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)}

最后看页面得效果

谢谢支持

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

微信小程序中使view占满整个屏幕高度的实现方法
前言: 今天做小程序的时候,在项目中要用到一个view占满屏幕高度和宽度,然后再在这个view里放置其他元素的情况. 宽度很简单,直接设置width: 750rpx;或者width: 100%;就行. ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
微信小程序中的Page
微信小程序中的Page Page()定义在js文件中,Page() 函数用来注册一个页面. Page()函数接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. obje ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
在微信小程序中怎么让一个页面的信息传递到另一个页面
首先需要在前台搭建好需要展示的那个页面.  <view class='nav'>输入个人信息</view> ...
关于微信小程序中时间预约的简单实现
关于微信小程序中时间预约的简单实现 1. js中定义获取日期函数.日期点击事件 2. 在data中定义数组等变量 3. onLoad调用函数并保存回data 4. wxml展示 5. 页面监控函数on ...
微信小程序中使用全局变量解决页面的传值问题
微信小程序中使用全局变量解决页面的传值问题由于项目需要,最近便在做一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变 ...
室内定位——如何在微信小程序中获取Beacon的RSSI值
前言:本文使用的Beacon是智石科技的Smart Beacon,手机的操作系统是Android,其中实现室内定位最重要的参数是Beacon发射的蓝牙信号中的RSSI值.废话不多说,请看下面分解. ...
微信小程序中的onLoad
微信小程序中的onLoad onLoad是一个生命周期函数,表示页面加载 onLoad默认有一个Object类型的参数,是指其他页面打开当前页面所调用的 query 参数举个栗子~ 当我们在页面f ...

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

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

最新文章

热门文章