小程序左右滑动对比图片

思路：

1、将修复后的图定位，放在盒子底部；
2、将修复前的图定位，放在盒子上层，设置修复前的盒子的宽度为最外层盒子宽度的50%，再设置一下overflow: hidden；
3、写一个竖线，初始位置为盒子中间，给它绑定一个bindtouchmove事件，监听竖线拖动时距盒子左边的距离，通过这个距离来设置“修复前图片”的宽度；
4、注意：修复前和修复后的图片，初始宽高是一样的，宽度要设置具体值，不能设置为100%，因为图片设置了mode=“aspectFit”
（缩放模式，保持纵横比缩放图片，可以完整地将图片显示出来）。

html部分：

  <view class="image-compare">
    <view class="repair-container">
      <image mode="aspectFit" class="repair-img" src="{{destUrl}}" />
      <image class="front_icon" src="/image/index/after.png">image>
    view>
    <view class="repair-container repair-container-new" style="width:{{left}}px;">
      <image mode="aspectFit" class="repair-img" src="{{originUrl}}" />
      <image class="front_icon2" src="/image/index/front.png">image>
    view>
    <view class="drag-container" style="left:{{left}}px">
      <view class="drag-line">view>
      <image bindtouchmove="ballMoveEvent" class="icon-drag" src="/image/index/contrast.png">image>
    view>
  view>

js部分：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    destUrl: "https://amemori-s3-cn-northwest-1.s3.cn-northwest-1.amazonaws.com.cn/OldPhotoOutputs/Pklj7CI4_repair/output_image.jpg",
    originUrl: "https://amemori-s3-cn-northwest-1.s3.cn-northwest-1.amazonaws.com.cn/OldPhotoOutputs/Pklj7CI4_repair/input.jpg",
    left: ''
  },
  ballMoveEvent(e) {
    let left = e.touches[0].pageX
    let rightLimit = wx.getSystemInfoSync().windowWidth - 20  //减去页面内边距
    if (left < 0) {
      left = 0;
    }
    if (left >= rightLimit) {
      left = rightLimit;
    }
    this.setData({
      left
    });
  },
})

css:

page {
  padding: 20rpx;
  box-sizing: border-box;
}
.image-compare {
  width: 100%;
  height: 840rpx;
  box-sizing: border-box;
  border: 2rpx solid #8A8BFE;
  border-radius: 12rpx;
  background-color: #F1F1F1;
  overflow: hidden;
  position: relative;
}
.repair-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.repair-img {
  /* 盒子的宽度 */
  width: 706rpx;
  height:100%;
}
.repair-container-new {
  width: 353rpx;
  overflow: hidden;
  background-color:#F1F1F1;
}
.fix-text {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  width: 100rpx;
  color: #000000;
  text-align: center;
  opacity: 0.8;
  background-color: #FEB600;
}

.drag-container {
  position: absolute;
  left: 353rpx;
  height: 100%;
}

.drag-line {
  width: 4rpx;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: #fff;
}

.icon-drag {
  width: 100rpx;
  height: 40rpx;
  position: absolute;
  top: 704rpx;
  left: -50rpx;
}

.front_icon {
  width: 120rpx;
  height: 52rpx;
  position: absolute;
  top: 100rpx;
  right: 0;
}
.front_icon2 {
  width: 120rpx;
  height: 52rpx;
  position: absolute;
  top: 100rpx;
  left: 0;
}

效果图展示：