一、效果展示
类似于这种效果，拖动中间的按钮能够实现左右滑动，来控制两张图片展示的比例。
二、主要思想
主要的结构如下（括号内部为类名），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。
