微信小程序实现 swiper 滑块

原创

已于 2025-02-03 20:05:40 修改 · 5.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2020-10-29 13:56:35 首次发布

本文介绍了Swiper组件的基础用法及高级特性，包括如何使用Swiper-item实现内容展示、设置间距和衔接滑动效果等，并提供了高度自适应的实现方案。

swiper：滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为。

swiper 的默认高度是 height：150px，无法由内容自动撑开。

swiper-item：仅可放置在 swiper 组件中，宽高自动设置为100%。

基础用法：

请添加图片描述

<!-- index.wxml -->
<swiper indicator-dots indicator-active-color="#FFFFFF">
  <swiper-item wx:for="{
  
  {swiperList}}" wx:key="index" class="swiper-item">
    {
  
  {item}}
  </swiper-item>
</swiper>

// index.js
Page({
  data  : {
    swiperList: ['1', '2', '3', '4'],
  },
})

/* index.wxss */
.swiper-item {
  background-color: #FF4A2F;
  color: #FFFFFF;
  font-size: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}