微信小程序使用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 相关文章推荐
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
php绘制一个矩形的方法
2015/01/24 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
浅谈php的优缺点
2015/07/14 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python实现抖音点赞功能
2019/04/07 Python
python脚本后台执行方式
2019/12/21 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
应届生服务员求职信
2013/10/31 职场文书
上课睡觉检讨书
2014/01/28 职场文书
反对邪教标语
2014/06/30 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
报到证办理个人委托书
2014/10/06 职场文书
写给导师的自荐信
2015/03/06 职场文书
大学军训口号大全
2015/12/24 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书