微信小程序技术点 -- 3D轮播图

最新推荐文章于 2023-05-25 11:56:30 发布

weixin_34260991

最新推荐文章于 2023-05-25 11:56:30 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b2321cde51d455883464847

本文介绍了一个基于微信小程序的Swiper轮播组件实现方案，通过自定义样式和交互逻辑，实现了图片轮播功能，并提供了缩放效果增强用户体验。

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

预览效果

代码

swiper.js代码

Page({
  data: {
    imgUrls: [
      'http://chuantu.biz/t6/328/1528961604x-1376440252.png',
      'http://chuantu.biz/t6/328/1528961633x-1376440252.png',
      'http://chuantu.biz/t6/328/1528961652x-1376440252.png'
    ],
    swiperIndex: 1
  },
  swiperChange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  }
})
复制代码

swiper.wxml代码

<view class='page-hb'>
  <swiper indicator-dots="{{true}}" autoplay="{{false}}" previous-margin="{{'188rpx'}}" next-margin="{{'188rpx'}}" bindchange="swiperChange" current='1'>
    <block wx:for="{{imgUrls}}" wx:key="{{index}}">
      <swiper-item class="{{swiperIndex == index ? 'active' : ''}}">
        <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/>
      </swiper-item>
    </block>
  </swiper>
</view>
复制代码

swiper.wxss代码

/**我这里为iPhone6的设计图*/
swiper{
  width: 750rpx;
  height: 500rpx;
}
swiper-item{
  padding-top: 100rpx;
}
/**这里图片的尺寸需要动态设置，margin-left需要设置为width的一半的负值*/
.page-hb image{
  width: 280rpx;
  height: 280rpx;
  position: absolute;
  left: 50%;
  margin-left: -140rpx; 
}
.page-hb image.active{
  transform: scale(1.29);
  transition:all .2s ease-in 0s;
}
复制代码