在微信小程序中，滑块视图容器（swiper）是一个非常常用且灵活的组件。它可以用于制作轮播图、图片列表等多种效果。
swiper 组件的基本用法
swiper 组件的基本使用非常简单，只需要引入组件，并在页面定义 swiper 的标签即可：
-- -------------------- ---- -------
------- ---------------------------------- ----------------------- ----------------------- ------------------------
-------------
------ ----------------------------
--------------
-------------
------ ----------------------------
--------------
-------------
------ ----------------------------
--------------
---------其中，indicator-dots 表示是否显示指示点，autoplay 表示是否自动切换，interval 表示自动切换时间间隔，duration 表示滑动动画时长。swiper-item 标签则表示每个 swiper 子项。在 swiper-item 中可以放置任何小程序组件。
swiper 组件的高级用法
除了基本用法之外，swiper 组件还支持许多高级用法，下面介绍几个较为常用的：
1. swiper-item 自适应高度
在默认情况下，swiper-item 的高度需要手动设置。但是有时候我们希望 swiper-item 的高度可以根据内容自适应，这时候可以使用 block 标签包裹 swiper-item：
<swiper>
<block wx:for="{{list}}" wx:key="index">
<swiper-item>
<view>{{item.content}}</view>
</swiper-item>
</block>
</swiper>其中，wx:for 和 wx:key 表示列表渲染的语法。使用 block 包裹 swiper-item 后，swiper-item 的高度就可以自适应了。
2. swiper-item 渐变效果
有时候我们需要给 swiper-item 添加渐变效果，可以通过添加 cover-view 和 cover-image 实现：
-- -------------------- ---- -------
--------
-------------
----------- --------------------------
------------ ----------------------------------
--------------
-------------
----------- --------------------------
------------ ----------------------------------
--------------
-------------
----------- --------------------------
------------ ----------------------------------
--------------
---------然后在 CSS 文件中定义 mask 类：
.mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));
}3. swiper-item 点击事件
有时候我们需要给 swiper-item 添加点击事件，可以通过在 swiper-item 上添加绑定事件来实现：
-- -------------------- ---- -------
--------
------------ ----------------
------ ----------------------------
--------------
------------ ----------------
------ ----------------------------
--------------
------------ ----------------
------ ----------------------------
--------------
---------然后在 JS 文件中定义 onTap 函数：
Page({
onTap(event) {
console.log('swiper-item tapped', event.currentTarget.dataset)
}
})这里的 event.currentTarget.dataset 表示当前点击的 swiper-item 的 dataset 数据。
swiper 组件的实例代码
下面是一个简单的 swiper 组件实例代码，包含了上述三种高级用法：
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/1835) ，转载请注明来源
[https://www.javascriptcn.com/post/1835](https://www.javascriptcn.com/post/1835)