小程序实现类似探探的滑动切换图片的效果

公司要求写了下类似探探的滑动切换图片的效果，写好了把代码分享一下，希望能有帮助

1.js文件

//设置屏幕宽高的全局变量

var winWidth = 414;

var winHeight = 736;

Page({

data: {

x: winWidth,

y: winHeight,

distance: "",

animationData: {},

content: [{ "value": ''}, { "value": '' }, { "value": '' }, { "value": ''}]

},

onLoad: function(){

var that = this;

var res = wx.getSystemInfoSync();

winWidth = res.windowWidth;

winHeight = res.windowHeight;

that.setData({

x: winWidth,

y: winHeight

})

},

tap: function (e) {

var that = this;

var distance = that.data.distance;

if ((distance > (winWidth + winWidth / 2)) || (distance < (winWidth - winWidth / 2))) {

var content = that.data.content;

content.splice(e.currentTarget.dataset.index, 1);

that.setData({

x: winWidth,

y: winHeight,

content: content

});

} else{

that.setData({

x: winWidth,

y: winHeight

})

}

},

onChange: function (e) {

var that = this;

that.setData({

distance: e.detail.x

})

},

onScale: function (e) {

}

})

2.wxml文件

< view class= "section">

< movable-area class= "area">

< movable-view wx:for= "{{content}}" wx:key= "index" x= "{{x}}" y= "{{y}}" direction= "all" bindchange= "onChange" out-of-bounds= "true" data-index= "{{index}}" catch:touchend= "tap">

< image animation= "{{animationData}}" src= "{{item.value}}" class= "image"></ image >

</ movable-view >

</ movable-area >

</ view >

3.wxss文件

.area {

top: -100vh;

left: -100vw;

height: 200vh;

width: 200vw;

/* background:#000; */

background: rgba( 0, 0, 0, 0 );

}

.mo_top{

position: absolute;

top: 0;

left: 0;

height: 100vh;

width: 100vw;

background: rgba( 0, 0, 0, 0 );

}

.image {

position: relative;

width: 100vw;

height: 100vh;

}

.content_s {

z-index: 999;

}