微信小程序使用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 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
Javascript 构造函数详解
Oct 22 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
微信小程序实现锚点跳转
Nov 23 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
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
javascript深入理解js闭包
2010/07/03 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
js实现列表按字母排序
2020/08/11 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
python采集百度百科的方法
2015/06/05 Python
Python虚拟环境项目实例
2017/11/20 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
《颐和园》教学反思
2014/02/26 职场文书
经典安踏广告词
2014/03/21 职场文书
十佳青年事迹材料
2014/08/21 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
客户付款通知书
2015/04/23 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
利用python调用摄像头的实例分析
2021/06/07 Python
php去除deprecated的实例方法
2021/11/17 PHP
Oracle 触发器trigger使用案例
2022/02/24 Oracle