前言
功能:实现类3d轮播,切换效果为放大缩小
技术: 使用 mpvue框架,用小程序swiper组件以及小程序Animation动画对象
项目地址: https://github.com/gzz0204/mpvue-swiper
效果:
演示效果图
一、结构
小程序swiper
改为mpvue的写法。
设置prevIoUs-margin和next-margin来漏出两边的模块
设置circular使轮播无限循环
绑定change事件,自定义handleChange方法获取当前swiper的index
小程序swiper文档
<template>
<div class="home_wrap">
:prevIoUs-margin"prevIoUsMargin"
circular"circular"
<blockv-for"(item,index) in datalist" :key"index">
"curIndex===index ? 'active_item' : 'item'"animation"index == curIndex ? animationData : animationData2">
<Carddata"item" />
</swiper-item>
</swiper>
"swiper_dot_wrap" <ul>
></li>
</div>