微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码


Posted in Javascript onNovember 09, 2018

具体代码如下所示:

// 1.scroll-y="true" Y轴滚动 
// 2.应该是设置了高才能行
// 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位
<scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}">
 <block wx:for="{{recordList}}" wx:key="item.id">
 <view>
 <text>{{item.text}}</text>
 </view
 </block>
</scroll-view>

Page({
 data: {
 // 列表
 recordList:'',
 height: '',
 scrollTop: 0
 },
 onLoad: function (options) {
 // 获取当前窗口的高度
 var height = wx.getSystemInfoSync().windowHeight;
 // 下面的是我封装的一个http请求
 App.HttpService.getReturnVisitRecordList(options.id).then(res => {
 //res 是请求成功后返回的数据
  if (res.data.code === 0) {
  var length = res.data.data.length
  that.setData({
  // 将获取的List赋值给recordList
   'recordList': res.data.data,
   // 1.计算页面上每一个item的标签的高
   // 2.用数组的获取的List的长度*每个item标签的高度(400是我目测的,说白了就是瞎写的,反正肯定比每个item的高度高,只要够高就行。)
   'scrollTop': length * 400
  })
  }
 })
 }
})

总结

以上所述是小编给大家介绍的微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
初识javascript 文档碎片
Jul 13 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
Javascript基础教程之变量
Jan 18 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
vue.js自定义组件directives的实例代码
Nov 09 #Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 #Javascript
webpack 静态资源集中输出的方法示例
Nov 09 #Javascript
vue中如何去掉空格的方法实现
Nov 09 #Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 #Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 #Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 #Javascript
You might like
一个程序下载的管理程序(二)
2006/10/09 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
php字符串函数学习之substr()
2015/03/27 PHP
Js中sort()方法的用法
2006/11/04 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python获取任意xml节点值的方法
2015/05/05 Python
解析Python中的二进制位运算符
2015/05/13 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
大学应届毕业生个人求职信
2013/09/23 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
幼儿园老师寄语
2014/04/03 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python