小程序scroll-view区域滚动到最底部

标签: 小程序 scroll-view
24人阅读 评论(0) 收藏 举报
分类:

需求:用到这个需求的地方是在做一个对话页面,scroll-view区域要显示到最新的信息,也就是滚动到最底部。

思路:绑定scroll-view的scroll-top属性,在每次监听到事件或者websocket回调时设置其值,当大于scroll-view的列表高度的时候就会显示到最底部了。

wxml:

<scroll-view scroll-y='true' scroll-top="{{scrollTop}}"><scroll-view>

js:

Page({
  data:{
    scrollTop: 0;
  },
  sendMessage: function(){
    var len = this.data.consult.length //遍历的数组的长度
      this.setData({
        scrollTop: 1000 * len  // 这里我们的单对话区域最高1000,取了最大值,应该有方法取到精确的
      });
  }
})
这样粗略实现

查看评论

微信小程序-scroll-view滚动到指定位置(一)

先来说一下官网例子吧 API 自己看咯  https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=2016112...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2016-12-21 16:16:48
  • 22254

小程序里如何使页面自动滚动到底部

在更新数据后,以及初次进入页面,希望页面停留在最底部 // 获取容器高度,使页面滚动到容器底部 pageScrollToBottom: function() { wx.createSel...
  • zgmu
  • zgmu
  • 2018-03-14 15:41:13
  • 401

微信小程序-scroll-view滚动到索引位置(二)

有一些重要的关键点请看上一篇文章 微信小程序-scroll-view滚动到指定位置(一) 主要用到scroll-into-view  如果你想让他回顶部 直接用scroll-top即可 话不多说...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2016-12-21 17:36:15
  • 14510

小程序制作回到顶部按钮

我们先看一下效果吧,直接上图。第一种情况,当页面在顶部的时候,回到顶部按钮是不会出现的。第二种情况,当页面在离开顶部一定距离的时候,回到顶部按钮出现接下就是对代码的分析了: 在这里我们如果要...
  • qq_24147051
  • qq_24147051
  • 2017-01-08 14:12:07
  • 9576

小程序scroll-view加载至最底部

根据业务需求要使小程序scroll-view中的内容每次都加载至最底部 小程序并没提供这样的属性,因此通过设置scroll-top解决。 原理:scroll-top>内容长度时会加载至最底部。 ...
  • wangxuefei1
  • wangxuefei1
  • 2018-01-22 15:11:13
  • 848

微信小程序滚动到某个位置改变效果

Some of the words 200 ? 'class1' : 'class2'}}" //JS文件 //滚动监听 scroll: function (e) { this.setDa...
  • kajweb
  • kajweb
  • 2017-05-08 21:23:40
  • 8651

微信小程序 scroll-view的滚动条设置

小程序的scroll-view用的比较多了,列表页一般也没管它的滚动条,最近突然发现在android与ios中横向滑动的时候表现不一样。不一样在哪呢,ios上直接就不显示啊,也是没谁了。深入想了一下,...
  • qq_32067045
  • qq_32067045
  • 2018-04-16 16:13:48
  • 35

微信小程序 scroll-view滚动到索引位置

有一些重要的关键点请看上一篇文章微信小程序-scroll-view滚动到指定位置(一)主要用到scroll-into-view  如果你想让他回顶部 直接用scroll-top即可话不多说,看代码wx...
  • yelin042
  • yelin042
  • 2018-01-18 19:04:12
  • 293

微信小程序-scroll-view横向滚动和上拉加载

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。 先看最终效果。横向滚动1.设置滚动项display:inline-block; 2.设置滚动视图容器whi...
  • u013778905
  • u013778905
  • 2017-03-04 17:04:12
  • 17490

小程序scroll-view区域滚动到最底部

需求:用到这个需求的地方是在做一个对话页面,scroll-view区域要显示到最新的信息,也就是滚动到最底部。思路:绑定scroll-view的scroll-top属性,在每次监听到事件或者webso...
  • aydongzhiping
  • aydongzhiping
  • 2018-04-17 16:47:51
  • 24
    个人资料
    等级:
    访问量: 1940
    积分: 90
    排名: 142万+
    文章分类
    最新评论