微信小程序——<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=" ...
随机推荐
- 005 SpringCloud 学习笔记01-----系统架构的演变
1.系统架构的演变 随着互联网的发展,网站应用的规模不断扩大.需求的激增,带来的是技术上的压力.系统架构也因此不断的演进.升级.迭代.从单一应用,到垂直拆分,到分布式服务,到SOA,以及现在火热的微服 ...
- Java基础教程(26)--反射
一.类 对于每一种类型的对象,Java虚拟机都会实例化一个java.lang.Class类的不可变实例.该实例提供了获取对象的运行时属性的方法,包括它的成员和类型信息.Class类还提供了创建新实 ...
- SQLite接口函数 - C核心api实践与总结
SQLite核心源代码由C语言写就,同时提供了很多的扩展包可应用于其他编程语言和类库,如Python.Ruby.Java.Perl..Net/C#.Qt和ODBC.在很多情况下,针对一种语言有很多扩展 ...
- laravel 自定义验证 Validator::extend
laravel 自定义验证 $messages = [ 'name.integer' => '名字不能为整型', 'name.max' => '长度不能超过5', ]; public st ...
- 「UR#5」怎样跑得更快
「UR#5」怎样跑得更快 膜这个您就会了 下面是复读机mangoyang 我们要求 \[ \sum_{j=1}^n \gcd(i,j)^{c-d} j^d x_j=\frac{b_i}{i^d} \] ...
- BZOJ3514 / Codechef GERALD07 Chef and Graph Queries LCT、主席树
传送门--BZOJ 传送门--VJ 考虑使用LCT维护时间最大生成树,那么对于第\(i\)条边,其加入时可能会删去一条边.记\(pre_i\)表示删去的边的编号,如果不存在则\(pre_i = 0\) ...
- 认识KNX协议
一.简介 KNX是Konnex的缩写.1999年5月,欧洲三大总线协议EIB.BatiBus和EHSA合并成立了Konnex协会,提出了KNX协议.该协议以EIB为基础,兼顾了BatiBus和EHSA ...
- 学习笔记—log4net
一.log4net.dll下载地址:http://logging.apache.org/log4net/download_log4net.cgi 二.在项目中引用log4net.dll 三.设置在程序 ...
- css3 text-fill-color属性
text-fill-color是什么意思呢?单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色,和color的效果很相似.如果同时设置text-fill-color和colo ...
- python学习之os模块
1 window下的路径分隔符和mac上的一样吗 在win下用\做路径分隔符,mac里用/ 2.如何查看当前工作目录 import os os.getcwd() 3.如何切换当前工作目录 import ...