微信小程序实现 swiper 滑块

花铛

已于 2025-02-03 20:05:40 修改

阅读量5k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

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

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/109356217

微信小程序专栏收录该内容

35 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}

滑块项之间存在间距，且露出前后项的一部分：

请添加图片描述

<!-- index.wxml -->
// circular：采用衔接滑动；previous-margin：露出前一项的一小部分；next-margin：露出后一项的一小部分
<swiper indicator-dots indicator-active-color="#FFFFFF" circular previous-margin="100rpx" next-margin="120rpx">
  <swiper-item wx:for="{{swiperList}}" wx:key="index" class="swiper-item">
    <view class="swiper-content">{{item}}</view>
  </swiper-item>
</swiper>

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

/* index.wxss */
.swiper-item {
  display: flex;
  justify-content: center;
}

.swiper-content {
  background-color: #FF4A2F;
  color: #FFFFFF;
  font-size: 48rpx;
  // swiper-item 是占据整个 swiper 的，其 width 是100%。在 swiper-item 中添加一个元素，将其 width 设置为 swiper-item 的 80%，并使其居中显示。
  width: 80%; 
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
}

`swiper` 高度自适应，随内容高度变化而变化：

// swiper 无法自动从撑开高度，获取其内容 domClass  的高度赋值给 swiper
const domClass = `.shelf-product-content-${this.data.currentShelfIndex}`
this.createSelectorQuery().select(domClass).boundingClientRect().exec(res => {
	if ((res && res[0] && res[0].height)) {
       this.setData({swiperHeight: res[0].height})
    }
})