小程序之翻页效果

axml

<view onTap="a" style="background:#fcc;position:relative;width:714rpx;height:1000rpx;display:flex;flex-direction:column;align-items:center;justify-content:center">
  <view style="width:{{picWidth}}rpx;height:{{picHeight}}rpx;background-color:#ddd;background-image:url(https://img.alicdn.com/imgextra/i2/39767794/O1CN01bQ9uDh27RhbUgcETy_!!39767794.png);background-size:100% 100%"></view>
  <!--翻页 -->
  <view style="position:absolute;
               left:-{{moveLeft+boxSpace}}rpx;
               width:{{boxWidth}}rpx;
               height:{{boxHeight}}rpx;
               transform-origin:{{flag?boxWidth:(boxWidth-(picWidth-boxSpace))}}rpx {{(boxHeight-picHeight)/2}}rpx;
               overflow:hidden;
               transform:rotateZ(-{{flag?boxRotate:0}}deg) translateX({{flag?0:-(picWidth-boxSpace)}}rpx);
               transition:all 2s">
    <view style="position:relative;width:{{boxWidth}}rpx;height:{{boxHeight}}rpx;">
      <view style="position:absolute;
                   right:-{{boxSpace}}rpx;
                   top:{{(boxHeight-picHeight)/2}}rpx;
                   width:{{picWidth}}rpx;
                   height:{{picHeight}}rpx;
                  
                   transform:rotateZ({{flag?boxRotate:0}}deg) translateX({{flag?0:(picWidth-boxSpace)}}rpx);
                   transform-origin:{{(picWidth-boxSpace)}}rpx 0rpx;
                   background-image:url(https://img.alicdn.com/imgextra/i1/39767794/O1CN01D8SgUY27RhbWke54s_!!39767794.png);
                   background-size:100% 100%;
                   transition:all 2s">
      </view>
      <view style="position:absolute;
                   right:-{{picWidth-boxSpace}}rpx;
                   top:{{(boxHeight-picHeight)/2}}rpx;
                   width:{{picWidth}}rpx;
                   height:{{picHeight}}rpx;
                   
                   transform:rotateZ({{-(flag?boxRotate:0)}}deg) translateX({{flag?0:-(picWidth-boxSpace)}}rpx);
                   transform-origin:{{boxSpace}}rpx 0rpx;
                    background-image:url(https://img.alicdn.com/imgextra/i2/39767794/O1CN01wt7VdM27Rhb4xnwQ5_!!39767794.png);
                   background-size:100% 100%;
                   transition:all 2s">
      </view>
    </view>
  </view>
</view>

js

Component({
  mixins: [],
  data: {
    flag: true
  },
  props: {},
  didMount() {
    let data = this.props.data.mds.moduleData;
    this.setData({
      boxPos: '600|1000|60|30',
      picPos: '400|400'
    });
    this.splitArr(this.data.boxPos, 'box', 0, 1, '', '', '', '', 2, 3);
    this.splitArr(this.data.picPos, 'pic', 0, 1);
    let a = Math.cos(this.data.boxRotate * Math.PI / 180);
    console.log(a);

    this.setData({
      moveLeft: (this.data.boxWidth - (714 - this.data.picWidth) / 2 - this.data.picWidth),
      changeY: ((this.data.boxSpace * Math.cos(this.data.boxRotate * Math.PI / 180)))
    });
    console.log(this.data.changeY);
    console.log(Math.cos(this.data.boxRotate * Math.PI / 180).toFixed(2));


  },
  didUpdate() { },
  didUnmount() { },
  methods: {
    splitArr(obj, name, a, b, c, d, e, f, g, o, l, s, m, n, k) {
      this.setData({
        [`${name}Width`]: parseInt(obj.split("|")[a]) || this.data[`${name}Width`],
        [`${name}Height`]: parseInt(obj.split("|")[b]) || this.data[`${name}Height`],
        [`${name}Top`]: parseInt(obj.split("|")[c]) || 0,
        [`${name}Right`]: parseInt(obj.split("|")[d]) || 0,
        [`${name}Bottom`]: parseInt(obj.split("|")[e]) || 0,
        [`${name}Left`]: parseInt(obj.split("|")[f]) || 0,
        [`${name}Space`]: parseInt(obj.split("|")[g]) || 0,
        [`${name}Rotate`]: parseInt(obj.split("|")[o]) || 0,
        [`${name}BgColor`]: obj.split("|")[l] || '#fff',
        [`${name}Color`]: obj.split("|")[s] || '#000',
        [`${name}Times`]: parseInt(obj.split("|")[m]) || 1000,
        [`${name}ATimes`]: parseInt(obj.split("|")[n]) || 1000,
        [`${name}Scale`]: obj.split("|")[k] || 0.6
      })
    },
    a() {
      this.setData({
        flag: !this.data.flag
      });
    }
  },
});