微信小程序使用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 相关文章推荐
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
vue cli升级webapck4总结
Apr 04 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
js资料toString 方法
2007/03/13 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python编写猜数字小游戏
2019/10/06 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
机工车间主任岗位职责
2014/03/05 职场文书
优秀员工推荐材料
2014/12/20 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
详解MySQL中的主键与事务
2021/05/27 MySQL
python+opencv实现目标跟踪过程
2022/06/21 Python