微信小程序仿探探翻图片

代码下载：https://download.youkuaiyun.com/download/cc1314_/10515654

index.wxml

<view >
   <image style="position:absolute;z-index:-1;height: 100vh; width: 100vw;" mode='scaleToFill' src='{{img2}}'></image> 
  <movable-area wx:if="{{hiddenimg}}" style="height: 160vh; width: 260vw; background: transparent;left:-80vw;top:-30vh;">
    <movable-view style="height: 100vh; width: 100vw;background: transparent;left:80vw;top:30vh" x="{{x}}" y="{{y}}" direction="all" bindchange="moveimg" animation="false">
    <image bindtouchend="touchendimg" bindtouchcancel='touchendimg'  style="width:100%;height:100%;" mode='scaleToFill' src='{{img1}}'></image>
    </movable-view>
  </movable-area>
</view>

index.js

var prex = 0;
const app = getApp()
Page({
  data: {
    img1: "../../images/img1.jpg",
    img2: "../../images/img2.jpg",
    x: 0,
    y: 0,
    hiddenimg: true
  },
  moveimg: function (e) {
    var that = this;
    prex = e.detail.x;
  },
  touchendimg: function (e) {
    console.log(e)
    console.log(prex)
    var that = this;
    if (prex < -200 || prex > 200) {
      that.setData({
        hiddenimg: false,
      }, () => {
        setTimeout(function () {
          that.setData({
            hiddenimg: true,
            img1: that.data.img2
          })
        }, 300)
      })
    } else {
      setTimeout(function () {
        that.setData({
          x: 0,
          y: 0
        })
      }, 300)
    }
  },
})

index.wxss

page{
  width:100%;
  height:100%;
  overflow:hidden;
}

代码下载：https://download.youkuaiyun.com/download/cc1314_/10515654