在vue里边实现翻页效果

只是简单的实现了一下，没有加以修饰样式效果。
只是简单的整理了一下思路

效果图展示

代码开始

01.css的样式

<style lang="less" scoped>
.navflipbook {
  transform-style: preserve-3d;
      position: relative;
}
.page {
  width: 300px;
      height: 550px;
      border: 1px solid aquamarine;
      text-align: center;
      line-height: 550px;
      font-size: 16px;
      transition: 0.6s;
      transform-origin: left;
      ;
      position: absolute;
      top: calc(50vh - 260px);
      left: calc(50vw - 150px);
      img {
        width: 100%;
        height: 100%;
      }
}
</style>

02.div遍历图片、展示

<template>
  <div>
    <!-- 动态翻页效果 -->
    <div class="navflipbook" v-for="(item ,index ) in flipbook" :key="index">
      <div class="page" ref="page" @click="leftfilp(index,item)" :style="{transform:item.transform}">
      <img :src="item.title" alt="">
      </div>
    </div>
  </div>
</template>

03.js的编写

<script>
export default {
  data(){
    return{
      flipbook:[
        {id:1,title:'https://ts1.cn.mm.bing.net/th/id/R-C.022cf76bb19bd2f74ea41fa964ef151e?rik=x03nimO6HU2Qxw&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2013%2f0723%2fsdidjj3.jpg&ehk=a5kOiFn0%2fceBgmP%2feR00I336Xs0n6dCppNVbTDO7xIY%3d&risl=&pid=ImgRaw&r=0',transform: 'rotateY(0deg)'},
        {id:2,title:'https://tse4-mm.cn.bing.net/th/id/OIP-C.U5cQVbtGTrOhmZukWd4GQQHaQC?pid=ImgDet&rs=1',transform: 'rotateY(0deg)'},
        {id:3,title:'https://img.zcool.cn/community/012dfe5d566fbfa80120695c49ad8c.jpg@1280w_1l_2o_100sh.jpg',transform: 'rotateY(0deg)'},
        {id:4,title:'https://ts1.cn.mm.bing.net/th/id/R-C.6fbba14e7605c8f1aded7bd8ec330bc7?rik=RiALIZCTuAH0jA&riu=http%3a%2f%2fuploadfile.bizhizu.cn%2f2016%2f1111%2f20161111100806147.jpg&ehk=4KBipn2s%2fA8aspjBG1%2fPuoEE5F%2fMqnBL8%2bmO3Wh8AJo%3d&risl=&pid=ImgRaw&r=0',transform: 'rotateY(0deg)'},
      ],
      
    }
  },
  methods:{
    leftfilp(e,a){
      // console.log(this.$refs.page)
      console.log(e,a,this.flipbook.length)
      if( a.transform=='rotateY(180deg)'){
        a.transform='rotateY(0deg)'
        a.id=a.id+1
        console.log(a.id)
      }else {
        a.transform='rotateY(180deg)'
        a.id=a.id-1
        console.log(a.id)
      }
    
    }
  }
}
</script>