preface

Function: to achieve 3d rotation, switching effect to zoom in and out
Technology: UsempvueFrame the swiper component with a small program as wellAnimation An Animation object
Effect:


Demo renderings

Project Address:Github.com/gzz0204/mpv…

A, structure,

Small program swiper is changed to mpvue.

  • Set previous-margin and next-margin to leak out modules on both sides
  • Set circular to an infinite loop

  • Bind the change event and customize the handleChange method to get the index of the current swiper


    Small program swiper document 

<template> <div class="home_wrap"> <swiper class="home_swiper" :previous-margin="previousMargin" :next-margin="nextMargin" :circular="circular" @change="handleChange($event)"> <block v-for="(item, index) in datalist" :key="index"> <swiper-item> <div :class="curIndex===index ? 'active_item' : 'item'" :animation="index == curIndex ? animationData : animationData2"> <! <Card :data="item" /> </div> </swiper-item> </block> </swiper> <! -- indicating point -- -- > < div class = "swiper_dot_wrap" > < ul > < li v - for = "(item, index) in datalist" :key="index" :class="{'active':curIndex === index}"></li> </ul> </div> </div> </template>Copy the code

Second, the js

<script> import Card from '@/components/home_card' export default { data () { return { curIndex: 0, datalist: [{coverImg: 'http://n.sinaimg.cn/sinacn20118/201/w1080h721/20190119/3311-hrvcwnk7953342.jpg', the title: 'murmansk, desc: 'Murmansk, the largest city in the Arctic Circle, only half an hour's drive from Finland, has just emerged from the extreme night, the sun has not yet risen above the horizon, and the city is only illuminated by the reflection of the clouds. It is bright for a few hours a day, but the glow lasts all day.' 'https://lh3.googleusercontent.com/IU9_NYevRO-fFjiH_hhjuxTOuDhG3cmMCWNOlnz2TBoG9jICiZevHGC0eJmvsrUwUAtbeFc=s128', Title: 'Once upon a Time in Anatolia ', desc: 'Murmansk 2, the largest city in the Arctic Circle, only half an hour's drive from Finland, has just emerged from the extreme night, the sun has not yet risen above the horizon, the city is only reflected by the clouds, light is only a few hours a day, but the red glow lasts all day.'}, {coverImg: 'https://lh3.googleusercontent.com/xNHcyfvW2wbnSHzp9ldizNUoqhwpumx0j3QdnOlrOPH6gj4yWDif1mnaBtezpjMe9_AUKIc=s128', Title: 'St. Petersburg is another Amsterdam ', desc: 'Murmansk 3, the largest city in the Arctic Circle, only half an hour's drive from Finland, rises from the polar night, the sun has not yet risen above the horizon, and the city is only illuminated by the reflection of clouds. It is only bright for a few hours a day, but the red glow lasts all day.'}], circular: PreviousMargin: '63rpx', nextMargin: '63rpx', animationData: {}, // }}, components: {Card}, methods: { handleChange (e) { this.curIndex = e.mp.detail.current this.changeActive() this.changeNormal() }, ChangeNormal () {var animation2 = wx.createAnimation({duration: 500, timingFunction: Animation2 = animation2 animation2.scale(0.9).opacity(0.3).step() this.animationData2 = Animation2.export ()}, // Expand changeActive () {var animation = wx.createAnimation({duration: 500, timingFunction: 'ease' }) this.animation = animation animation.scale(1).opacity(1).step() this.animationData = animation.export() } } } </script>Copy the code

Three, style,

<style lang="less" scoped> .home_swiper { margin-top: 200rpx; position: relative; width: 100%; height: 876rpx ! important; background: #303030; }. Item {transform: scale (0.9); transform-origin: 50% 50% 0px; Opacity: 0.3; } .active_item{ transform: scale(1); opacity: 1; Swiper_dot_wrap {position: absolute; top: 106rpx; right: 65rpx; width: 200rpx; height: 15rpx; ul{ float: right; overflow: hidden; li{ float: left; width: 15rpx; height: 15rpx; box-sizing: border-box; border-radius: 50%; border: 2rpx solid #b99c6d; margin-right: 15rpx; &:last-child{ margin-right: 0rpx; } &.active{ background: #b99c6d; } } } } </style>Copy the code

Subcomponents card

Each card is split into a separate component for easy modification.

<template> <div class="item"> <div class="card"> <! <image class="item_image" : SRC =" data.coverimg "/> </div> <! <div class="cont_wrap"> <! - the title -- -- > < div class = "title_wrap" > < div class = "title" > {{data. The title}} < / div > < / div > <! -- description --> <div class="desc">{{data.desc}}</div> </div> </div> </template> <script> export default {props: { data: { type: Object } } } </script> <style lang="less" scoped> .item{ height: 890rpx; position: relative; .card{ position: absolute; width: 625rpx; height: 811rpx; background: #fff; border-radius: 7rpx; Animation-opacity: 1; animation-opacity: 1; animation-opacity: 1; } /* banner */ .img_wrap{ position: relative; background: #303030; /* image */. Item_image {display: block; width: 100%; height: 399rpx; border-radius: 7rpx 7rpx 0 0; z-index: 5; Opacity: 0.7; }} /* title_wrap{width: 560rpx; height: 100rpx; margin: 0 auto; // padding-left: 130rpx; box-sizing: border-box; color: #b99c6d; border-bottom: 2rpx dotted #e4dcce; .title{ position: relative; font-size: 30rpx; line-height: 35rpx; height: 70rpx; padding-top: 30rpx; overflow: hidden; }} // description.desc {width: 554rpx; height: 140rpx; margin: 0 auto; color:#666666; font-size: 24rpx; line-height: 28rpx; overflow: hidden; margin-top: 21rpx; text-align: justify; } </style>Copy the code