微信小程序使用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问题整理
Aug 16 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
JavaScript实现分页效果
Mar 28 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
Vue 请求传公共参数的操作
Jul 31 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
Python如何读写字节数据
2020/08/05 Python
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
Linux操作面试题
2012/05/16 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
学生会个人总结范文
2015/02/15 职场文书
检讨书怎么写
2015/05/07 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
Python竟然能剪辑视频
2021/05/25 Python
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫