最近在做个直播间,有个这样的需要,就是进入到页面,<scroll-view>需要滚动到最底部,并且发送消息之后自动的滚动到底部。

开始想着计算里面内容的高度,然后通过设置 scroll-top 的值,达到这个效果。在网上搜一圈,大多也是采取的这种方案。但是感觉这个方案略麻烦。想另寻一条解决方案。

后面看官方文档有个scroll-into-view的属性,如下图:

想着,滚动到底部不就是滚动到最后一条数据嘛~遍历数据的时候给每条数据添加一个id,设置scroll-into-view的值为最后一条数据的id不就可以了嘛~如下图:

至于这个id可以利用好索引,它最后一条数据的id就是所有数据的length-1了。我是直接在索引上+1的。如下图:

页面进入时滚动到底部:

接收消息的滚动到底部代码截图:

productDiscussionList表示会话列表的数据。

微信小程序——<scroll-view>滚动到最底部的更多相关文章

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  3. 解决微信小程序ios端滚动卡顿的问题

    方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...

  4. [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

    小程序 picker 多列选择器 数据动态获取 需求是将各校区对应各班级的数据 以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据 和 班级数据 分别是两个接口,以 校区 t ...

  5. 微信小程序scroll-view横向滚动

    官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...

  6. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  7. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  8. 微信小程序 左右分类滚动列表

    今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. <view class="page"> <view class ...

  9. 微信小程序将view动态填满全屏

    一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ ...

  10. 微信小程序-通知公告滚动提示

    wxml如下: <view class='scroll_view_border'> <view class="srcoll_view" bindtap=" ...

随机推荐

  1. sqlserver 数据类型 C# clr 数据类型 映射

    https://docs.microsoft.com/zh-cn/dotnet/framework/data/adonet/sql/linq/sql-clr-type-mapping#default- ...

  2. MYSQL --Subquery returns more than 1 row查询结果多于一行

    Subquery returns more than 1 row表示子查询返回了多行数据 例如: select * from table1 where table1.colums=(select co ...

  3. 嵌入式02 STM32 实验09 独立/窗口看门狗

    一.独立看门狗和窗口看门狗 看门狗:单片机系统在外界的干扰下会出现程序跑飞的现象导致死循环,或者崩溃,看门狗电路就是为了避免这种情况的发生,看门狗的作用就是在一定的事件内(通过计数器实现)若没有收到喂 ...

  4. 学Python要避免哪些坑,如何巩固好基础

    学Python要避免哪些坑?零基础怎么入门Python?Python入门简单.语法简洁.功能强大,非常适合零基础入门IT行业的人学习.随着人工智能时代的来临,企业纷纷选择使用Python进行开发,Py ...

  5. 构建helm chart应用

    使用helm命令创建基础目录 helm create t2cp [root@node04 ~]# tree t2cp t2cp ├── charts ├── Chart.yaml ├── templa ...

  6. 关于ElasticSearch的堆内存设置与优化

    1.什么是堆内存?Java 中的堆是 JVM 所管理的最大的一块内存空间,主要用于存放各种类的实例对象.在 Java 中,堆被划分成两个不同的区域:- 新生代 ( Young ).- 老年代 ( Ol ...

  7. sleep方法动态打印 C语言

    #include<Windows.h> #include<stdio.h> #include<stdlib.h> #include<string.h> ...

  8. java之hibernate之hibernate缓存

    这篇主要讲 hibernate缓存 1.缓存的作用是为了提高效率 2.Hibernate的开发效率比较高,但是执行效率相对较低. 3.Hibernate提供了缓存来提高效率.hibernate缓存分为 ...

  9. 设置断点调式 fiddler

    1. 用IE 打开博客园的登录界面  http://passport.cnblogs.com/login.aspx 2. 打开Fiddler,  在命令行中输入bpu http://passport. ...

  10. dexlib2的源码框架

    这个是dexlib2的目录,明显看出来比baksmali和smali代码量要多很多,这里先将核心目录给大家做一下介绍 analysis 这个暂时不知道具体作用 base     这个文件夹下面全部都是 ...