小程序scroll-view 组件实现自动滚动到最底部

方式一:

为了实现聊天室最新信息展示,需要自动滚动到底部
可以用scrollTop实现,chatData为消息的数组,scrollTop的值大于scroll-view的高度,则会自动滑动到底部,要注意的是,scrollTop的滚动需要动态改变才会触发,所以如果有一进入页面就进行滚动的需求,可以用settimeout函数延时setData

<scroll-view class="commentroll" scroll-y="true" style="height:{{rollheight}}rpx" 
scrollTop="{{chatData.length*500}}"></scroll-view>

方式二:通过scroll-into-view属性

<scroll-view class="newsContainer" scroll-y="true" style="height:1300rpx" scroll-into-view="{{intoView}}" >
<block wx:for="{{data}}">
  <view   id={{id}}>
    {{item.text}}
  </view>
</block>
</scroll-view>

scroll-into-view的值为动态改变的,在里边的view的id需要与scroll-into-view的值对应,需要注意的一个坑是,如果你需要动态改变数组,同时改变scroll-into-view的值,需要分两次setdata,一次改变渲染的数组,后sedata scroll-into-view的值,否则可能出现不对应的情况

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 案例: 消息列表充满屏幕的时候,底部永远要展示新消息,也就是说要让最新的数据自动向上滚动,这需要用到scroll-...
    liluo风阅读 4,092评论 1 1
  • 一. scroll-view 可滚动视图区域。 二. 属性 三. 实现 1. 纵向滚动 需要打开是否允许纵向滚动。...
    Mccc_阅读 4,611评论 0 3
  • 实现效果:左边点击西餐,右边会滚动至西餐置顶区域;右边滚动到西餐区域,左边西餐会是选中状态 知识点:scroll-...
    Do_Du阅读 832评论 0 1
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,594评论 28 53
  • 信任包括信任自己和信任他人 很多时候,很多事情,失败、遗憾、错过,源于不自信,不信任他人 觉得自己做不成,别人做不...
    吴氵晃阅读 6,224评论 4 8