微信小程序scroll-view实现横向滚动和上拉加载示例
2017-03-06 09:30
1281 查看
今天介绍微信小程序中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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序-scroll-view横向滚动和上拉加载
- 微信小程序scroll-view实现字幕滚动
- 微信小程序 scroll-view实现锚点滑动的示例
- 微信小程序 scroll-view横向滚动 坑
- 微信小程序,使用scroll-view实现下拉加载更多(下一页)源码
- 微信小程序上拉刷新和下拉加载2种方法实现,onPullDownRefresh,scroll-view使用
- 微信小程序 scroll-view实现上拉加载与下拉刷新的实例
- 微信小程序scroll-view横向滚动
- 微信小程序scroll-view横向滚动真机测试失败
- 微信小程序scroll-view横向滑动嵌套for循环的示例代码
- 微信小程序scroll-view组件实现滚动动画
- 微信小程序中使用scroll-view控件实现上拉加载更多遇到的坑
- 微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多
- 微信小程序例子——如何使用scroll-view组件实现视图垂直滚动
- 微信小程序顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,
- 微信小程序scroll-view实现滚动穿透和阻止滚动的方法
- 微信小程序实现页面下拉刷新和上拉加载
- 微信小程序开发—(十三)可滚动视图区域 scroll-view