微信小程序使用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 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
几种tab切换详解
Feb 03 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 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
php session 错误
2009/05/21 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php目录拷贝实现方法
2015/07/10 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python实现Linux中的du命令
2017/06/12 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Django中Middleware中的函数详解
2019/07/18 Python
python scatter函数用法实例详解
2020/02/11 Python
最小二乘法及其python实现详解
2020/02/24 Python
python图片合成的示例
2020/11/09 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
人事专员职责
2014/02/22 职场文书
四风问题查摆材料
2014/08/25 职场文书
环境卫生倡议书
2014/08/29 职场文书
英文慰问信范文
2015/03/24 职场文书
教师继续教育反思周记
2015/06/25 职场文书
学生会部长竞选稿
2015/11/19 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
Python保存并浏览用户的历史记录
2022/04/29 Python