最近在做个直播间,有个这样的需要,就是进入到页面,<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. flask源码系列

    更新中 HTML文档中元素存在,但是在浏览器中不显示.一般用于配合JavaScript代码使用. 04 LocalStack和Local对象实现栈的管理 05 Flask源码之:配置加载 06 Fla ...

  2. JAVA如何实现中式排名和美式排名

    根据公司需求,需要编写中式和美式排名算法,根据具体业务编写的,代码如下,看不懂留言,欢迎探讨,求高手指教更高效稳定的方法.private static int[] datas = {9,9,10,10 ...

  3. PHP 使用 pdo 操作oracle数据库 报错

    ## SELECT UNID,NAME,NAME_XML WHERE UNID>=10 AND UNID<=15 ## 在10到15这5条数据中不为空数据php: symbol looku ...

  4. ODBC数据导入

    这个方法其实是导入excel 首先进入pl/sql dev (1):tools-->ODBC importer (2):点击connect,选择需要导入的excel (3):如果事先数据库中没有 ...

  5. selenium中元素操作之简单的鼠标、键盘操作(三)

    1.鼠标操作导入类:ActionChains --鼠标的操作形成一连串的动作链,由selenium的ActionChains类来完成模拟鼠标操作手表操作的过程:1.鼠标的操作,先放到一个列表中2.利用 ...

  6. 一 python并发编程之多进程

    一 进程与程序 二 并发与并行 三 同步\异步和阻塞\非阻塞 四 进程的创建 五 进程的终止 六 进程的层次结构 七 进程的状态 八 进程并发的实现 一 进程与程序 什么是进程: 进程的概念:我们知道 ...

  7. 【转载】C#中List集合使用AddRange方法将一个集合加入到指定集合末尾

    C#编程开发过程中,List集合是时常使用到的集合对象,如果在List集合的操作中需要将1个List集合加入到另一个List集合的末尾,则可以使用List集合的AddRange方法来实现,AddRan ...

  8. 使用vue-cli搭建vue项目问题解决方案

    工欲善其事必先利其器,安装所需环境 node和npm的安装 首先需要安装node环境,直接到官网下载安装包 https://nodejs.org/zh-cn/ 安装node默认安装npm, 不需要重复 ...

  9. js原型链的看法

    原型链 对象 对象: 1,函数对象:由function创造出来的函数 2,普通对象:除开函数对象之外的对象,都是普通对象 **即普通对象obj是构造函数Object的一个实例,因此: obj.__pr ...

  10. 交换ESCHAUNGE英语ESCHAUNGE交易所

    exchange From Middle English eschaunge, borrowed from Anglo-Norman eschaunge exchange 1.An act of ex ...