微信小程序滚动视图实现横向滚动和上拉加载示例 - 行业资讯

今天介绍微信小程序中滚动视图实现横向滚动和上拉加载的实现及需要注意的地方。
　　

先看最终效果。

<强>横向滚动

1。设置滚动项显示:inline-block;
　　

2。设置滚动视图容器空白:nowrap;}
　　

3。滚动项不要用浮

<强>为什么会有以上三点要求呢?
　　

其实横向滚动官方文档中是没有做太多说明的,只说明需要定义滚动视图滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧,所以才发现需要定义滚动项及容器的一些属性,浮动是不能让所有的滚动项一排显示的。

<>强上拉加载

代码如下:
　　& lt;滚动视图scroll-y=" true " bindscrolltolower=皃ullUpLoad”类=癱ontent-wrap”在
　　

实现上拉加载,只需要绑定bindscrolltolower事件处理,当滚动到底部/左边的时候,触发这个处理函数,逻辑上就是去请求下一页的数据,并且视图上显示正在加载的样式,当数据请求成功,将其拼合到之前的数据中,并隐藏正在加载的样式。

　　　　//下拉加载　　pullUpLoad:函数(){ 　　var=这个; 　　console.log(“====下拉====") 　　如果(! that.data.hidden) { 　　that.data.params。pageNo +=1; 　　that.setData ({ 　　参数:that.data.params, 　　}）　　如果(that.data.params。pageNo & lt;=that.data.totalPages) { 　　that.setData ({ 　　隐藏:没错, 　　}）　　that.getShareList (); 　　其他}{ 　　that.setData ({ 　　隐藏:假的, 　　}）　　} 　　} 　　} 　　　　之前　　　　

<>强如何设置滚动视图满屏滚动

文档中说到:使用竖向滚动时,需要给一个固定高度,通过wxs设置高度。

那么我们想让小程序满屏滚动该如何设置高度呢,直接设置高度:100% & # 63;好像不是很好,用原因是因为这个高度没有参照物,以前我们是设置体的高度,类似,我们这里发现小程序页面渲染出来的容器是页面,那我们就先设置页面的高度100%,再设置滚动视图高度100%,问题得到解决。

官方推荐的加载效果

　　　　　　onLoad:功能(选项){ 　　wx.showToast ({ 　　标题:“加载中”, 　　图标:“加载”, 　　持续时间:10000//加载时间　　}）;//wx.hideToast();隐藏装载　　} 　　　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。