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

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

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

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

页面进入时滚动到底部:

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

微信小程序——<scroll-view>滚动到最底部的更多相关文章
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
- 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置
1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...
- 解决微信小程序ios端滚动卡顿的问题
方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...
- [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式
小程序 picker 多列选择器 数据动态获取 需求是将各校区对应各班级的数据 以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据 和 班级数据 分别是两个接口,以 校区 t ...
- 微信小程序scroll-view横向滚动
官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...
- 关于微信小程序获取view的动态高度填坑
wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...
- 微信小程序scroll标签的测试
一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...
- 微信小程序 左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. <view class="page"> <view class ...
- 微信小程序将view动态填满全屏
一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750) ][ ...
- 微信小程序-通知公告滚动提示
wxml如下: <view class='scroll_view_border'> <view class="srcoll_view" bindtap=" ...
随机推荐
- Flask源码之:路由加载
路由加载整体思路: 1. 将 url = /index 和 methods = [GET,POST] 和 endpoint = "index"封装到Rule对象 2. 将Ru ...
- AVR单片机教程——数码管
先解答之前一个思考题:如果不把引脚配置为输出而写高电平,连接LED会怎样? 实验结果是,LED会亮,但相比于输出高电平的情况,亮度很低.这是为什么呢? 通过上一篇教程我们知道,引脚输入输出模式是由寄存 ...
- MVC中Model BLL层Model模型互转
MVC中Model BLL层Model模型互转 一. 模型通常可以做2种:充血模型和失血模型,一般做法是模型就是模型,不具备方法来操作,只具有属性,这种叫做失血模型(可能不准确):具备对模型一定的简单 ...
- 易百教程人工智能python修正-人工智能无监督学习(聚类)
无监督机器学习算法没有任何监督者提供任何指导. 这就是为什么它们与真正的人工智能紧密结合的原因. 在无人监督的学习中,没有正确的答案,也没有监督者指导. 算法需要发现用于学习的有趣数据模式. 什么是聚 ...
- 用StatSVN统计svn项目中每人代码提交量
用StatSVN统计SVN服务器项目的代码量 下载并安装SVN统计工具StatSVN 1)下载地址:sourceforge.net/projects/statsvn/ 2)解压压缩包,到一个目录,如D ...
- json_rpc_2 implementation
https://stackoverflow.com/questions/52670255/flutter-json-rpc-2-implementation import 'dart:convert' ...
- Matlab适配器模式
适配器模式是连接两个不兼容接口的桥梁,主要分为三种:类适配器.对象适配器以及接口适配器,本文根据https://blog.csdn.net/u012359453/article/details/791 ...
- pandas-05 map和replace操作
# pandas-05 map和replace操作 map可以做一个映射,对于操作大型的dataframe来说就非常方便了,而且也不容易出错.replace的作用是替换,这个很好理解. import ...
- 珠宝juelrye宝石
juelrye n.珠宝 late 14c., juelrye "precious ornaments, jewel juelrye (uncountable) Adornment with ...
- 支付宝支付 微信支付SDK接口不统一? 盘他!
开发过支付宝.微信支付的同学都知道,微信的支付 API 设计感觉是 Java 开发工程师写的,远不如支付宝 SDK 的接口设计用起来顺手.在这里,统一封装微信支付和支付宝支付的API,使两种支付方 ...