微信小程序使用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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
es6 for循环中let和var区别详解
Jan 12 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机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
Javascript学习笔记 delete运算符
2011/09/13 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
pycharm 安装JPype的教程
2019/08/08 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
scrapy-splash简单使用详解
2021/02/21 Python
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
董事长秘书职责
2014/01/31 职场文书
安全生产月宣传标语
2014/10/06 职场文书
环境卫生整治简报
2015/07/20 职场文书
初中数学教学随笔
2015/08/15 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
《颐和园》教学反思
2016/02/19 职场文书