微信小程序——<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=" ...
随机推荐
- Feign 自定义编码器、解码器和客户端,Feign 转发请求头(header参数)、Feign输出Info级别日志
Feign 的编码器.解码器和客户端都是支持自定义扩展,可以对请求以及结果和发起请求的过程进行自定义实现,Feign 默认支持 JSON 格式的编码器和解码器,如果希望支持其他的或者自定义格式就需要编 ...
- POJ 1321 棋盘问题(C)回溯
Emmm,我又来 POJ 了,这题感觉比上次做的简单点.类似皇后问题.但是稍微做了一点变形,比如棋子数量是不定的.棋盘形状不在是方形等等. 题目链接:POJ 1321 棋盘问题 解题思路 基本思路:从 ...
- C指针的一些小细节
1 int *c;*c=4-->int *c;int b;c=&b;*c=4; 在使用指针之前,一定要将其初始化,当然,如果是赋予一个地址,就相当于使用的同时就进行了初始化.
- Codeforces Round #426 (Div. 1) (ABCDE)
1. 833A The Meaningless Game 大意: 初始分数为$1$, 每轮选一个$k$, 赢的人乘$k^2$, 输的人乘$k$, 给定最终分数, 求判断是否成立. 判断一下$a\cdo ...
- docker swarm yaml
https://www.cnblogs.com/bigberg/p/8867326.html 一.简介 Docker有个编排工具docker-compose,可以将组成某个应该的多个docker容器编 ...
- RabbitMQ知识梳理
RabbitMQ 基本概念 交换机类型: RabbitMQ 运转流程: AMQP协议 入门使用 安装环境: 交换机和队列: 进阶使用 消息去从 消息确认投递 消息防止丢失 过期时间 (TTL) 消息分 ...
- springboot笔记10——整合Redis
依赖 <dependencies> <!--web依赖--> <dependency> <groupId>org.springframework.boo ...
- python 基础(集合)
#set里的元素是唯一的,即没有重复的,可以用set()函数,去数据的重复冗余 L = [1,1,1,2,4,5,6,7] S = set(L) print(S) #打印结果{1, 2, 4, 5, ...
- SqlDataSource控件超时的困惑
想用最简单的SqlDataSource控件完成对一个记录数很多的表的查询操作,结果出现超时异常,找了些解决方法都不奏效,后来在www.codeproject.com查到高手也放弃了用控件的方法,于 ...
- 【转载】C#中使用decimal.TryParse方法将字符串转换为十进制decimal类型
在C#编程过程中,将字符串string转换为decimal类型过程中,时常使用decimal.Parse方法,但decimal.Parse在无法转换的时候,会抛出程序异常,其实还有个decimal.T ...