微信小程序——<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=" ...
随机推荐
- Idea 目录结构下有红色波浪线
问题截图: 解决方案: Build -> Rebuild Project
- [转帖]TimesTen与Redis的对比
TimesTen与Redis的对比 2017-02-23 17:25:27 dingdingfish 阅读数 3682更多 分类专栏: TimesTen Oracle Redis In-Memory ...
- Spring计时器StopWatch使用
我们可以利用已有的工具类中的秒表,常见的秒表工具类有org.springframework.util.StopWatch.org.apache.commons.lang.time.StopWatch以 ...
- 【JVM】3、jvm参数和main方法参数
在实际应用中,我们经常会使用一些额外的参数定义不通的环境下jvm的启动设置 特别是springCloud的项目,因为yml配置文件的问题,如果我们要做负载的话,会同时启动一个jar当做2个服务 那么这 ...
- 【leetcode-135,62,63 动态规划】分发糖果 ,不同路径
分发糖果 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分. 你需要按照以下要求,帮助老师给这些孩子分发糖果: 每个孩子至少分配到 1 个糖果. 相邻的孩 ...
- logstash解析tomcat的catalina.out日志字段
filter { mutate { remove_field => ["@version","prospector","input", ...
- Spring-Cloud之Config配置中心-7
一.我们前面基本上都是讲解的Spring Cloud Netflix的组件,下面我们会重点说Spring Cloud Config分布式配置中心.为什么需要这个组件来管理配置呢?在分布式应用开发过程中 ...
- 又一个秘密如何让浏览器访问最新的js,css等外部引用
在引用文件末尾加上一个参数,让浏览器知道这个文件跟上一个文件是不同的,让浏览器去服务器重新加载最新的,例如:<script type="text/javascript" sr ...
- centos在线安装ffmpeg
简介: 跨平台解决方案,用于记录,转换和流式传输音频和视频 挂载yum源 https://rpmfusion.org/Configuration RHEL 7 or compatible like C ...
- k8s之pod与Pod控制器
k8s中最为重要的基础资源,pod,pod controller,service pod controller类型有多种需要向控制器赋值之后使用: kubectl命令使用 kubectk get no ...