微信小程序 图片处理前后对比 滑动效果
此处是封装的组件,如果在页面中需要使用的话需要把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="sliderimg_container">
<view class="wrapper" >
<view class="bottom">
<image src="/image/after.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>
</view>
wcss
.sliderimg_container{
height: 400rpx;
display: block;
}
.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%;
}
留待后查,同时方便他人
联系我:renhanlinbsl@163.com
联系我:renhanlinbsl@163.com