微信小程序是一种基于微信的应用，开发者可以使用它来快速构建小型的应用程序。在设计小程序时，滑动效果是非常重要的一部分。本文主要介绍微信小程序中的两种滑动方式：横向滑动和竖向滑动，并提供相应的实例代码。
横向滑动
横向滑动通常用于轮播图、商品展示等场景。我们可以使用 swiper 组件来实现横向滑动。
-- -------------------- ---- -------
------- -------- --------------- ---------
-------------
------ ----------------------------
--------------
-------------
------ ----------------------------
--------------
-------------
------ ----------------------------
--------------
---------上面的代码可以实现三张图片的横向轮播，其中 autoplay 表示自动播放，interval 表示轮播间隔时间，circular 表示循环播放。swiper-item 中可以放置任何元素，比如图片、文字等。
如果想自定义横向滑动的样式，可以使用 scroll-view 组件，设置 scroll-x 属性为 true。
<scroll-view scroll-x style="white-space: nowrap;"> <view style="display:inline-block;width:300px;height:200px;background-color:red;"></view> <view style="display:inline-block;width:300px;height:200px;background-color:green;"></view> <view style="display:inline-block;width:300px;height:200px;background-color:blue;"></view> </scroll-view>
上面的代码可以实现三块颜色不同的横向滑动区域，并且在页面宽度不足时可以自动横向滚动。
竖向滑动
竖向滑动通常用于新闻资讯、活动列表等场景。我们可以使用 scroll-view 组件来实现竖向滑动。
<scroll-view scroll-y style="height:400px;"> <view class="item">第一条新闻内容</view> <view class="item">第二条新闻内容</view> <view class="item">第三条新闻内容</view> <view class="item">第四条新闻内容</view> <view class="item">第五条新闻内容</view> </scroll-view>
上面的代码可以实现一列新闻内容的竖向滑动，其中 scroll-y 表示竖向滑动，height 表示滑动区域的高度。view 标签中的内容可以替换为任何需要呈现的元素。
如果想自定义竖向滑动的样式，可以在 scroll-view 组件中设置 scroll-y 属性为 true，然后使用 CSS 实现竖向滑动。
-- -------------------- ---- -------
------------ -------- --------------------------------------
----- ------------------
----- ---------------------------
----- ---------------------------
----- ---------------------------
----- ---------------------------
----- ---------------------------
-------
--------------
-------
---------- -
-------- -----
--------------- -------
-
----- -
------- -----
------------ -----
----------- -------
-
--------上面的代码可以实现一列自定义样式的竖向滑动区域。通过设置 overflow:hidden，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1220