社区首页 >专栏 >【愚公系列】《微信小程序与云开发从入门到实践》011-滑块容器组件

【愚公系列】《微信小程序与云开发从入门到实践》011-滑块容器组件

原创

愚公搬代码

发布于 2025-01-13 07:33:51

2070

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在微信小程序的开发过程中，用户体验的提升往往依赖于优秀的界面设计和交互效果。滑块容器组件作为一种常用的UI组件，能够实现内容的横向滑动展示，为用户提供直观而灵活的浏览体验。无论是在产品展示、图片浏览，还是在信息分类中，滑块容器都能有效地组织和呈现信息，让用户在有限的空间内获取更多的内容。

本篇文章将深入探讨微信小程序中的滑块容器组件，详细介绍其基本用法、常用属性及应用场景。我们将通过实例分析，帮助你理解如何灵活运用滑块容器组件，提升小程序的交互性和视觉效果。

无论你是小程序开发的新手，还是希望进一步优化用户体验的开发者，这篇文章都将为你提供丰富的知识和实用的技巧。让我们一起走进滑块容器组件的世界，打造出更加动感和吸引的小程序应用吧！

🚀一、滑块容器组件

滑块容器组件常用于图片浏览器和滚动广告位等功能中，其内可以放置一组子组件，子组件会按照预设的方式进行自动布局，并支持自动或手动地进行切换。相比scroll-view组件，滑块组件进行了更上层的封装，在某些需求场景下使用非常方便。

🔎1.swiper-item 组件介绍

swiper 是滑块容器组件，swiper是一种特殊的容器组件，其内的子组件只允许是swiper-item组件。同时，swiper-item组件也只允许放置在swiper组件内部。因此，在使用滑块组件时，自定义的内容视图实际上是放在swiper-item组件内的，swiper-item 组件的属性如表所示。

属性名	类型	意义
item-id	字符串	当前 swiper-item 的标识符
skip-hidden-item-layout	布尔值	是否跳过隐藏的滑块布局，设置为 true 时会增强滑动性能

🔎2.swiper 组件的应用

首先，在 pages 文件夹下新建一个 swiperDemo 页面，在 swiperDemo.wxml 文件中编写如下示例代码：

<!--pages/swiperDemo/swiperDemo.wxml-->
<swiper indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#ff0000" autoplay="true" interval="2000">
    <swiper-item>
        <view class="item">第一页</view>
    </swiper-item>
    <swiper-item>
        <view class="item">第二页</view>
    </swiper-item>
    <swiper-item>
        <view class="item">第三页</view>
    </swiper-item>
</swiper>

简单在 swiperDemo.wxss 文件中实现一下布局样式，如下所示：

/* pages/swiperDemo/swiperDemo.wxss */
.item {
    background-color: yellow;
    height: 100%;
    text-align: center;
    padding: auto;
}

运行代码，可以看到页面上已经展示出了一个支持自动水平滚动播放的滑块视图，如图所示。

如上述代码所示，可以对滑块视图做很多定制化的设置，例如是否展示指示点（内容的个数）、指示点默认的颜色和选中的颜色、是否支持自动播放等。表所示为滑块视图可设置的属性，可以通过代码设置体验它们的功能。

属性名	类型	意义
indicator-dots	布尔值	设置是否展示页面指示点
indicator-color	字符串	设置指示点的默认颜色
indicator-active-color	字符串	设置当前选中的指示点的颜色
autoplay	布尔值	设置是否自动播放
current	数字	当前所展示的内容的 index
interval	数值	设置自动播放的内容切换时间间隔，默认为 5000（单位为毫秒）
duration	数值	设置滑动动画时长，默认为 500（单位为毫秒）
circular	布尔值	是否循环播放，设置为 false 时，滚动到最后一个内容时，下次会返回到第一个内容；设置为 true 时，滚动到最后一个内容后，下次会继续向后滚动到第一个内容，体验上衔接性更好
vertical	布尔值	默认的滑块组件的滑动方向是水平方向的，将这个属性值设置为 true 则会变为竖直方向的滑动
previous-margin	字符串	设置前边距，例如 "10px"
next-margin	字符串	设置后边距，例如 "10px"
snap-to-edge	布尔值	指定间距是否应用到第一个和最后一个元素上
display-multiple-items	数值	设置可以同时展示的内容数量，默认为 1
easing-function	字符串	动画效果选项，可设置为：
		default: 默认效果
		linear: 线性动画
		easeInCubic: 缓入动画
		easeOutCubic: 缓出动画
		easeInOutCubic: 缓入/缓出动画
bindchange	函数	current 改变时触发的回调事件
bindtransition	函数	swiper-item 的位置发生变化时回调的事件，其中参数中会包含位置信息
bindanimationfinish	函数	滑动动画结束后会触发的回调事件