微信小程序实现 swiper 滑块

花铛

已于 2023-03-28 08:51:53 修改

阅读量4.9k

点赞数 6

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

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

本文链接：https://blog.csdn.net/wsln_123456/article/details/109356217

版权

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

35 篇文章 8 订阅

订阅专栏

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