微信小程序-scroll-view横向滚动和上拉加载
来源:互联网 发布:大帮手计件工资软件 编辑:程序博客网 时间:2024/06/06 05:47
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。
先看最终效果。
横向滚动
1.设置滚动项display:inline-block;
2.设置滚动视图容器white-space: nowrap;
3.滚动项不要用float
为什么会有以上三点要求呢?
其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view
滚动方向scroll-x=true
允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧。所以才发现需要定义滚动项及容器的一些属性,浮动是不能让所有的滚动项一排显示的。
上拉加载
<scroll-view scroll-y="true" bindscrolltolower="pullUpLoad" style="height: 58%;" class="content-wrap">
实现上拉加载,只需要绑定bindscrolltolower
事件处理,当滚动到底部/左边的时候,触发这个处理函数,逻辑上就是去请求下一页的数据,并且视图上显示正在加载的样式,当数据请求成功,将其拼合到之前的数据中,并隐藏正在加载的样式。
//下拉加载pullUpLoad: function(){ var that = this; console.log("====下拉====") if (!that.data.hidden) { that.data.params.pageNo += 1; that.setData({ params: that.data.params, }) if(that.data.params.pageNo <= that.data.totalPages){ that.setData({ hidden: true, }) that.getShareList(); }else{ that.setData({ hidden: false, }) } }}
如何设置scroll-view满屏滚动
文档中说到:使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。
那么我们想让小程序满屏滚动该如何设置高度呢,直接设置height:100%
?好像不是很好用,原因是因为这个高度没有参照物,以前我们是设置body的高度,类似,我们这里发现小程序页面渲染出来的容器是Page,那我们就先设置Page的高度100%,再设置scroll-view
高度100%,问题得到解决。
官方推荐的loading效果
onLoad:function(options){ wx.showToast({ title: '加载中', icon: 'loading', duration: 10000//loading时间 }); //wx.hideToast();隐藏loading}
4 0
- 微信小程序-scroll-view横向滚动和上拉加载
- 微信小程序 scroll-view横向滚动 坑
- 微信小程序上拉刷新和下拉加载2种方法实现,onPullDownRefresh,scroll-view使用
- 微信小程序-横向滑动scroll-view隐藏滚动条
- 微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多
- 微信小程序中使用scroll-view控件实现上拉加载更多遇到的坑
- 微信小程序自制scroll-view横向滑动滚动条(仿拼多多)
- 小程序 使用scroll-view实现上拉加载,下拉刷新
- 微信小程序之下拉加载和上拉刷新
- 微信小程序之下拉加载和上拉刷新
- scroll-view实现上拉加载(tab切换多页数据加载)
- 微信小程序-scroll-view滚动到指定位置(一)
- 微信小程序-scroll-view滚动到索引位置(二)
- 2.1.2微信小程序可滚动视图区域 scroll-view
- 微信小程序fixed定位下scroll-view滚动失效
- 微信小程序 scroll-view
- ListView的下拉刷新上拉加载以及带列的横向滚动
- 小程序上拉下拉共存时不可使用scroll-view的解决方法
- stm32 PB3 PB4 PA15引脚作为普通IO口使用指南
- Java课堂笔记----篇<2>----Java程序的开发步骤及注意事项
- 安装PHP集成环境WAMPServer时报错“无法启动此程序,因为计算机中丢失MSVCR110.dll”
- 【计算机网络】循环冗余校验CRC算法原理&计算过程
- ~斐波那契算法~
- 微信小程序-scroll-view横向滚动和上拉加载
- Struts2学习记录
- HTTPS和HTTP的区别
- spark SQL多表查询运行日志
- 【计算机网络】网际层协议--ARP&RARP
- 关于jquery中html()、text()、val()的区别
- 真的需要改变吗
- 优化算法之引力搜索算法
- Unity3D 摄像机cullingMask操作