微信小程序 图片处理前后对比 滑动效果

此处是封装的组件，如果在页面中需要使用的话需要把lifetimes中的attached方法移动到页面onload事件中，同时调整methods方法列表

js

// component/sliderimg/sliderimg.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  data: {
    clipPath:'polygon(0% 0,50px 0, 50px 100%, 0 100%);',
    positionValue:0,
    thumbLeftStr:'left: calc( 50% - 28px )',
    thumbDur:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    
  catchMouse(e){
    this.setData({
      pageX:e.touches[0].pageX,
    })
  },

  releaseMouce(){
    this.setData({
      positionValue:this.data.lastPositionValue,
      thumbDur:this.data.lastThumbDur
    })
  },

  touchMove(e){
    let dur= e.touches[0].pageX-this.data.pageX;
    let delta=this.data.positionValue+dur;
    let thumbDru=this.data.thumbDur+dur;
    this.setData({
      clipPath:`polygon(0% 0,${delta}px 0, ${delta}px 100%, 0 100%);`,
      thumbLeftStr:  `left: calc( 50% - 28px + ${thumbDru}px )`,
      lastPositionValue:delta,
      lastThumbDur:thumbDru
    })
  }
  },
  lifetimes: {
    attached: function() {
      wx.getSystemInfo({
        success:(res)=>{
          let half=res.windowWidth/2;
          // console.log(half);
  
          this.setData({
            clipPath:`polygon(0% 0,${half}px 0, ${half}px 100%, 0 100%);`,
            positionValue:half
          })
        }
      })
    }
  }
})

wxml

<view class="wrapper"  >
  <view class="bottom">
    <image src="/image/upload/success/uploadSuccess.png" draggable="false" class="imgcommon" />
  </view>
  <view class="top" style="clip-path: {{clipPath}}">
    <image src="/image/importbg.jpg" draggable="false" class="imgcommon" />
  </view>
  <view class="scroller scroller-top" style="{{thumbLeftStr}}"  bind:touchstart="catchMouse"   bind:touchmove="touchMove" bind:touchend="releaseMouce">
    <image  class="scroller scroller-top"  src="/image/icon/icon_array.png"/>
  </view>
</view>

wcss

/* * {
  margin: 0;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
} */

.wrapper {
  width: 100%;
  height: 400rpx;
  /* height: 600px;
  max-height: 100vh; */
  position: absolute;
  overflow: hidden;
}

.bottom,
.top {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}
.scroller {
  width: 50px;
  height: 50px;
  position: absolute;
  /* left: calc( 50% - 33px + 22px ); */
  top: 50%;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
.scroller-top {
  margin-top: -25px;
}

.scroller:before,
.scroller:after {
  content: " ";
  display: block;
  width: 7px;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -3.5px;
}
.scroller:before {
  top: 49px;
}
.scroller:after {
  bottom: 49px;
}

.scroller-top:before,
.scroller-top:after {
  background: #fff;
}
.imgcommon {
    width: 100%;
    height: 100%;
  }