微信小程序使用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 相关文章推荐
js中的前绑定和后绑定详解
Aug 01 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
理解javascript正则表达式
Mar 08 Javascript
js评分组件使用详解
Jun 06 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python简单实现基数排序算法
2015/05/16 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python爬取网页转换为PDF文件
2018/06/07 Python
python导入pandas具体步骤方法
2019/06/23 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
超市采购员岗位职责
2014/02/01 职场文书
公司联欢会策划方案
2014/05/19 职场文书
介绍信样本
2015/01/31 职场文书
转学证明范本
2015/06/19 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技