微信小程序swiper实现左右滑动效果选中卡片适当放大亲测有效

最新推荐文章于 2024-07-23 13:55:51 发布

weixin_42562044

最新推荐文章于 2024-07-23 13:55:51 发布

阅读量2.1k

点赞数 3

分类专栏：微信小程序swiper 文章标签： css javascript css3 html html5

本文链接：https://blog.csdn.net/weixin_42562044/article/details/108205103

版权

本文介绍如何在微信小程序中使用swiper组件，通过CSS和JavaScript实现左右滑动效果，并在滑动选中时使卡片适度放大。文中包含wxml、wxss和js代码示例，参照了相关教程。

摘要由CSDN通过智能技术生成

先上图
在这里插入图片描述
最近在公司中看到这样的效果，于是自己也上网参考，并写了一下
wxml

<swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange">
  <block wx:for="{
  {imgUrls}}" wx:index="{
  {index}}">
    <swiper-item class="swiper-item">
      <image mode="aspectFill" src="{
  {item}}" class="slide-image {
  {swiperIndex == index ? 'active' : ''}}"/>
    </swiper-item>
  </block>
</swiper>

wxss

.swiper-block{
    height: 480rpx;
    width: 100%;
  }
.swiper-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  over