微信小程序scroll-view实现横向滚动和上拉加载示例
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。
创新互联公司成立10年来,这条路我们正越走越好,积累了技术与客户资源,形成了良好的口碑。为客户提供网站建设、网站制作、网站策划、网页设计、域名申请、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等,这些对于网站建设都非常重要,创新互联公司通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案,携手广大客户,共同发展进步。
先看最终效果。
横向滚动
1.设置滚动项display:inline-block;
2.设置滚动视图容器white-space: nowrap;
3.滚动项不要用float
为什么会有以上三点要求呢?
其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧。所以才发现需要定义滚动项及容器的一些属性,浮动是不能让所有的滚动项一排显示的。
上拉加载
实现上拉加载,只需要绑定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实现横向滚动和上拉加载示例
文章转载:http://myzitong.com/article/pjgeco.html