公司要求写了下类似探探的滑动切换图片的效果,写好了把代码分享一下,希望能有帮助
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;
}