基于mpvue的小程序swiper类3d轮播

微信小程序 2020-03-08

前言

功能：实现类3d轮播，切换效果为放大缩小 
技术: 使用 mpvue框架，用小程序swiper组件以及小程序Animation动画对象

项目地址： https://github.com/gzz0204/mpvue-swiper

效果：

演示效果图

一、结构

小程序swiper 
改为mpvue的写法。

设置prevIoUs-margin和next-margin来漏出两边的模块 
设置circular使轮播无限循环

绑定change事件，自定义handleChange方法获取当前swiper的index

小程序swiper文档

    

  1. <template>
    2. 

  2.   <div class="home_wrap">
    3. 

  3.       :prevIoUs-margin"prevIoUsMargin"
    4. 

  4. circular"circular"
    5. 

  5.         <blockv-for"(item,index) in datalist" :key"index">
    6. 

  6.               "curIndex===index ? 'active_item' : 'item'"animation"index == curIndex ? animationData : animationData2">
    7. 

  7.                 <Carddata"item" />
    8. 

  8. </swiper-item>
    9. 

  9. </swiper>
    10. 

  10. "swiper_dot_wrap"      <ul>
    11. 

  11. ></li>
    12. 

  12. </div>
    13.

二、js

import Card from '@/components/home_card'

  •   data (){
    • 

  •       curIndex: 0,
    • 

  •         coverImg 'http://n.sinaimg.cn/sinacn20118/201/w1080h721/20190119/3311-hrvcwnk7953342.jpg'
    • 

  • 'https://lh3.googleusercontent.com/IU9_NYevRO-fFjiH_hhjuxTOuDhG3cmMCWNOlnz2TBoG9jICiZevHGC0eJmvsrUwUAtbeFc=s128'
    • 

  • '圣彼得堡是另一个阿姆斯特丹'
    • 

  •       prevIoUsMargin'63rpx'      animationData2{}// 卡片缩小动画
    • 

  •     components{
    • 

  •   methods{
    • 

  • changeActive()
    • 

    • 

  •     changenormal var animation2  wxcreateAnimation({
    • 

    • 

  • animation2  animation2
    • 

  •     changeActive  animation animation  animation
    • 

  • }
    •

    • 三、样式

    home_swiper {

  •   position relative;
    • 

  •   height876rpx!important;
    • 

  • }
    • 

  •   transform scale);
    • 

  •   opacity;
    • 

  • active_item);
    • 

  • // 指示点
    • 

  •   top106rpx  right65rpx15rpx  ulfloat right    overflow hidden;
    • 

  •  left;
    • 

  • 2rpx solid #b99c6d;
    • 

  • &:lastchild{
    • 

  • }
    • 

  • }
    •

    • 子组件card

    <template>

  • "card">
    • 

  • "img_wrap">
    • 

  • </div>
    • 

  • "cont_wrap">
    • 

  • "title_wrap">
    • 

  • >
    • 

  • "desc">{{desc}}</>
    • 

  • </template<script>
    • 

    • 

  • }
    • 

  • scriptstyle lang scoped890rpxcard    position;
    • 

  •     border7rpxactive_item /* banner */
    • 

  •   /* 图片 */
    • 

  • 399rpx7rpx0    zindex5    opacity0.7/* 标题出处 */
    • 

  •   Box  color#b99c6d;
    • 

  •     fontsize30rpx    lineheight35rpx70rpx    padding// 描述
    •