微信小程序使用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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 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去除头尾空格的2种方法
2015/03/16 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
盛大笔试题
2016/11/05 面试题
文明宿舍获奖感言
2014/02/07 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
医德医风自我评价2015
2015/03/03 职场文书
师范生见习自我总结
2015/06/23 职场文书
护士心得体会范文
2016/01/25 职场文书