微信小程序使用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学习笔记 delete运算符
Sep 13 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
js中常用的Math方法总结
Jan 12 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
node 标准输入流和输出流代码实例
Sep 19 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开发中的页面跳转方法总结
2015/04/26 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
用vue设计一个日历表
2020/12/03 Vue.js
Python中的exec、eval使用实例
2014/09/23 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python主线程捕获子线程的方法
2018/06/17 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python openssl模块安装及用法
2020/12/06 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
好的演讲稿开场白
2013/12/30 职场文书
校园新闻广播稿
2014/01/10 职场文书
大学毕业感言
2014/01/10 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
见习报告格式范文
2014/11/08 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL