微信小程序使用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 类型转换方法
Oct 24 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
layui动态表头的实现代码
Aug 22 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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
一个多文件上传的例子(原创)
2006/10/09 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python元组常见操作示例
2019/02/19 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
浅析Python的命名空间与作用域
2020/11/25 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
行政文秘岗位职责范本
2014/02/10 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
小学领导班子对照材料
2014/08/23 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis