微信小程序—常用的四种轮播图(间距、顶层、3D翻转、旋转木马)

摘要

微信小程序轮播图官方提供的swiper组件已经可以满足大部分轮播图效果,如间距轮播、顶层轮播,可仍有一些像3D翻转、旋转木马等效果需要通过监听滑动动作、利用动画去自定义实现,现就此四种效果提供解决方案及代码参考。

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

体验

体验路径:自定义系列>轮播图
在这里插入图片描述

代码

3D翻转轮播图与旋转木马轮播图代码

资源文件中包含封装的组件及使用demo,3d组件支持横向、竖向以及任意方向旋转。重要的事情说三遍:

源码免积分下载点击下载
源码免积分下载点击下载
源码免积分下载点击下载

间距轮播图与顶层轮播图代码

js部分

Page({
 data: {
    currentIndex: 0,
    currentIndex1: 0,
    currentIndex2: 0,
    imgList: [{
      img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000059.jpg"
    },
    {
      img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000064h.jpg"
    },
    {
      img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/07300256.jpg"
    }
    ],
    imgList1: [{
      img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/15511818.jpg"
    },
      {
        img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000063h.jpg"
      },
      {
        img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/15510230.jpg"
      }
    ],
  },

  changeSwiper: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
  changeSwiper1: function (e) {
    this.setData({
      currentIndex1: e.detail.current
    })
  },
})

wxml部分

<view class='container'>
  <view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">原生swiper实现</view>
  <scroll-view style="display:flex;width:100%" scroll-y>
    <view class="container">
      <view style="font-size:32rpx;color:#aaa">间距轮播图</view>
      <swiper style="width:100%;height:360rpx;margin-top:50rpx;" bindchange="changeSwiper" previous-margin="90rpx" next-margin="90rpx">
        <block wx:for="{{imgList}}" wx:key>
          <swiper-item class="swiperItem">
            <image mode="aspectFill" src='{{item.img}}' class="imageItem {{currentIndex == index ? 'active': ''}}"> </image>
          </swiper-item>
        </block>
      </swiper>
      <view style="font-size:32rpx;color:#aaa;margin-top:50rpx">顶层轮播图</view>
      <swiper style="display: flex;flex-direction: column;justify-content: center;align-items: center;overflow:unset;width:100%;height:360rpx;margin-top:50rpx;" bindchange="changeSwiper1" previous-margin="150rpx" next-margin="150rpx">
        <block wx:for="{{imgList1}}" wx:key>
          <swiper-item class=" {{currentIndex1 == index ? 'swiperItemActive1': 'swiperItem1'}}">
            <image mode="aspectFill" src='{{item.img}}' class="imageItem1 {{currentIndex1 == index ? 'active1': ''}}"> </image>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </scroll-view>
</view>

wxss部分

page {
  background: #f6f6f6;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.swiperItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: unset;
}

.imageItem {
  height: 300rpx;
  width: 510rpx;
  border-radius: 10rpx;
  margin: 30rpx 0rpx;
  z-index: 1;
}

.active {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  z-index: 2;
}

.swiperItem1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: unset;
  z-index: 0.5;
}

.swiperItemActive1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: unset;
  z-index: 1;
}

.imageItem1 {
  height: 300rpx;
  width: 510rpx;
  border-radius: 10rpx;
  margin: 30rpx 0rpx;
  /* opacity: 0.5; */
}

.active1 {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  /* opacity: 1; */
}

.box {
  width: 200rpx;
  height: 300rpx;
  margin: 50px auto;
  border-radius: 10rpx;
  perspective: 200;
  -webkit-perspective: 200;
  transform-style: preserve-3d;
}

.elem {
  width: 100%;
  height: 100%;
  transform: rotateY(30deg);
}

程序员不易,鼓励一下 !

在这里插入图片描述

  • 12
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
在开发微信小程序时,可以通过以下步骤来制作轮播图: 1. 在index.js文件中,定义一个data对象,包含一个lunboData数组用于存储轮播图的数据。在onLoad函数中,通过请求云端列表数据或者本地数据,将轮播图的数据赋值给lunboData数组。 2. 在index.wxml文件中,使用swiper组件来展示轮播图。设置indicator-dots属性为true,表示显示指示点。设置autoplay属性为true,表示自动播放。设置interval属性为轮播图切换的时间间隔,设置duration属性为轮播图切换的动画时长。 3. 在swiper组件内部,使用block和wx:for-items指令来遍历lunboData数组,生成多个swiper-item。在每个swiper-item内部,使用image组件来展示轮播图的图片,通过绑定src属性来设置图片的路径。 综上所述,通过在index.js中定义数据,然后在index.wxml中使用swiper组件来展示轮播图的图片,就可以制作轮播图了。具体的代码示例可以参考引用\[1\]和引用\[2\]中的代码。 #### 引用[.reference_title] - *1* [微信小程序云开发轮播图实现](https://blog.csdn.net/qq_52031400/article/details/123108607)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [微信小程序开发-轮播图的实现](https://blog.csdn.net/m0_54803288/article/details/123017672)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玩烂小程序

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值