bob体育官方平台
小程序scroll-view组件实现滚动的示例代码_javascript技巧_脚本之家

今天牵线Wechat小程序中scroll-view完结横向滚动和上拉加载的兑现及索要留意之处。

前言:这章我们运用小程序的 scroll-view组件 实现横向滚动和竖向滚动。

横向滚动

GitHub:

1.安装滚动项display:inline-block;

1、竖向滚动

2.装置滚动视图容器white-space: nowrap;

第豆蔻梢头从轻巧的来,竖向滚动异常的粗略,只用记住两点就可以:

3.滚动项不要用float

首先得设置 scroll-y 属性; 其次,一定要给 scroll-view 设置八个 height 高度;

缘何会有上述三点必要吗?

就好像此大家就得以实现了竖向滚动:

事实上横向滚动官方文书档案中是未有做太多表达的,只表明要求定义scroll-view滚动方向scroll-x=true允许横向滚动,但是自己在推行的时候自身意识,你要横向滚动,首先你得是一排吧。所以才发觉需求定义滚动项及容器的风度翩翩对属性,浮动是不能够让具备的轮转项一排彰显的。

2、横向滚动

上拉加载

横向滚动就有一些坑了...

复制代码 代码如下:

首先依旧要安装滚动方向为 scroll-x ; 然后要给 ` 设置white-spacenowrap不换行; 最后需要将容器中包裹的标签的display属性设置为inline-block` 。

完结上拉加载,只须要绑定bindscrolltolower 事件管理,当滚动到底层/侧边的时候,触发那些管理函数,逻辑上就是去央浼下黄金时代页的多少,而且视图上出示正在加载的样式,当数码诉求成功,将其拼合到早前的数据中,并规避正在加载的体裁。

就这么大家就得以完成了横向滚动的三个骨干职能:

返回顶部