微信小程序卡片左右滑动

春日迟迟~

已于 2022-07-01 16:25:08 修改

阅读量1.1k

点赞数 4

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

于 2022-07-01 14:48:43 首次发布

本文链接：https://blog.csdn.net/weixin_45689786/article/details/125558617

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

微信小程序

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

结构

<swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" bindchange="swiperChange">
    <block wx:for="{{proList}}" wx:index="{{index}}">
        <swiper-item class="swiper-item">
            <view style="background-image: url({{item.proUrl}});background-size:100% 100%" class="slide-image {{swiperIndex == index ? 'active' : ''}}">
                <view>{{item.title}}</view>
            </view>
            <!-- <image mode="aspectFill" src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/> -->
        </swiper-item>
    </block>
</swiper>

样式

.swiper-block {
  height: 330rpx;
  width: 100%;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: unset;
}
.slide-image {
  height: 307rpx;
  width: 587rpx;
  padding: 17rpx 22rpx;
  box-sizing: border-box;
  z-index: 1;
}
.active {
  transform: scale(1.1);
  transition: all 0.2s ease-in 0s;
  z-index: 20;
}

 swiperIndex: 0,  // 第一次加载默认第一张图片选中
   // 方法 
   swiperChange(e) {
    const that = this;
    that.setData({
      swiperIndex: e.detail.current,
    })
  },