微信小程序3D轮播图

一羊迁徙

于 2020-11-27 10:49:11 发布

阅读量1k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/weixin_43242112/article/details/110223522

版权

本文介绍了如何使用微信小程序的原生swiper组件创建3D轮播效果，重点讲解了previous-margin、next-margin和circular等关键API的用法，并提供了相关代码示例。

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

一、最终效果

在这里插入图片描述

二、利用原生swiper制作3D效果

1、需要注意的几个API

previous-margin：说白了就是前一张图片能露多少。
next-margin：说白了就是后一张图片能露多少。
circular：这个属性也是需要加的，加不加什么区别，一对比就知道。

在这里插入图片描述

2、上代码

wxml

 <view class="swiper_wrapper">
    <swiper 
      autoplay 
      indicator-dots 
      indicator-color="#8FA2EF" 
      indicator-active-color="#2F54EB" 
      class="swiper_two"
      previous-margin="150rpx"
      next-margin="150rpx"

最低0.47元/天解锁文章