手记

小程序 — scroll-view组件实现滚动

前言:这章我们使用小程序的scroll-view组件实现横向滚动和竖向滚动。
GitHub:https://github.com/Ewall1106/miniProgramDemo

1、竖向滚动

首先从简单的来,竖向滚动很简单,只用记住两点即可:

  • 首先得设置scroll-y属性;

  • 其次,一定要给scroll-view设置一个height高度;

<scroll-view scroll-y >
  <view class="green" ></view>
  <view class="red" ></view>
  <view class="yellow" ></view>
  <view class="blue" ></view></scroll-view>

就这样我们就实现了竖向滚动:

竖向滚动

2、横向滚动

横向滚动就有点坑了...

  • 首先还是要设置滚动方向为scroll-x

  • 然后要给<scroll-view></scroll-view>设置white-spacenowrap不换行;

  • 最后需要将容器中包裹的标签的display属性设置为inline-block

横向滚动

<scroll-view scroll-x >
  <view class="green" ></view>
  <view class="red" ></view>
  <view class="yellow" ></view>
  <view class="blue" ></view></scroll-view>

就这样我们就实现了横向滚动的一个基本效果:

横向滚动

3、其它

(1)当然,关于scroll-view组件官网还提供了许多其它的属性和事件方法,大家仔细去看看:

部分截图来自小程序官网



作者:Ewall_
链接:https://www.jianshu.com/p/0599cf0c44ce


0人推荐
随时随地看视频
慕课网APP