小程序如何实现滑动比较图片

一、效果展示

类似于这种效果，拖动中间的按钮能够实现左右滑动，来控制两张图片展示的比例。 

二、主要思想

主要的结构如下（括号内部为类名），movable-area以及movable-view是小程序内置可以实现拖动效果的标签（也是以使用获取元素位置方法实现拖拽效果），详情可见movable-area | 微信开放文档

我们实现的主要思想：分为前后两张图片用定位使之重合，前面那张图片外层添加一个盒子，并附上overflow：hidden属性，使之能控制前面图片展示的面积。movable-view又内置的change函数能够收到相对于起点的位置，使图片一半的宽度+change函数所收到的x值=overflow盒子的宽度，即可实现动态比较。

 我们在项目中把他抽成一个组件，方便后续的复用，所以后续我的代码可能会出现变量需要你们在用的时候传一下

三、代码实现

由于此代码是经过修改的代码，所以可能又部分位置不规范，并不影响功能使用，如果样式部分有一些小问题可以自行修改

下面分别是该组件的html，css，js部分，在父组件中应用该组件时直接应用即可，需要传入两张图片的连接以及大小（如果不需要的话可以在css中改为固定宽高）

export default class DragMove extends Vue {
  @Prop({ required: true }) imgHeight!: number;
  @Prop({ required: true }) imgWidth!: number;
  @Prop({ required: true }) output!: string;
  @Prop({ required: true }) input!: string;

  realerWidth: string = '50%';
  left: string = '50%';
  styles = styles;
  t = true;

  get width() {
    return this.imgWidth * 2 + (this.small ? 146 : 214);
  }

  bindchange(res:any) {
    this.realerWidth = `${(this.imgWidth / 2 + res.detail.x) * 2 + 6}rpx`;
  }
}

.real {
    border-radius: 20rpx;
    width: 100%;
    height: 100%;
    image {
        border-radius: 20rpx;
    }
    
}

.overflow {
    position: absolute;
    height: 100%;
    top: 0;
    overflow: hidden;
    border-radius: 20rpx;

    .realer {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 33;
        border-radius: 20rpx;
    }
}

.area {
    position: absolute;
    top: 0;
    z-index: 999;

    .view {
        position: absolute;
        left: 50%;
       
    }
}

如果有哪部分没有显示出来不妨试一下z-index。