微信小程序使用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实现2048游戏示例
May 04 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
分享5个好用的javascript文件上传插件
Sep 16 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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 ADODB使用方法集锦
2008/03/25 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
一文读懂Python 枚举
2020/08/25 Python
初一生物教学反思
2014/01/18 职场文书
班级活动策划书
2014/02/06 职场文书
2014高考励志标语
2014/06/05 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
纪检监察立案决定书
2015/06/24 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
python基础之类方法和静态方法
2021/10/24 Python
JS实现数组去重的11种方法总结
2022/04/04 Javascript