微信小程序使用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 sortable的拖动方法示例详解
Jan 16 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
javascript实现计算器功能详解流程
Nov 01 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 超链接 抓取实现代码
2009/06/29 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
Python Socket编程入门教程
2014/07/11 Python
Python中logging模块的用法实例
2014/09/29 Python
python使用生成器实现可迭代对象
2018/03/20 Python
详解python分布式进程
2018/10/08 Python
设置python3为默认python的方法
2018/10/31 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
地质灾害防治方案
2014/05/14 职场文书
学党史心得体会
2014/09/05 职场文书
就业意向书范本
2015/05/11 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
行为习惯主题班会
2015/08/14 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
Python类方法总结讲解
2021/07/26 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
Python面试不修改数组找出重复的数字
2022/05/20 Python