你的位置：
首页
>
业界
>
微信小程序手指拖动切换下一张
效果图：
index.wxml:
<view class="mask-movable">
<image style="position:absolute;z-index:-1;height: 600rpx; width: 492rpx;" mode='scaleToFill' src='{{img2}}'></image>
<movable-area wx:if="{{hiddenimg}}" style="height: 160vh; width: 260vw; background: transparent;">
<movable-view style="height: 600rpx; width: 492rpx;background: transparent;" x="{{x}}" y="{{y}}" direction="all" bindchange="moveimg">
<image bindtouchend="touchendimg" bindtouchcancel='touchendimg' style="width:100%;height:100%;" mode='scaleToFill' src='{{img1}}'></image>
</movable-view>
</movable-area>
</view>
index.wxss
page{
width:100%;
height:100%;
overflow:hidden;
}
.mask-movable{
width: 492rpx;
height: 600rpx;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
index.js
var prex = 0;
const app = getApp()
Page({
data: {
img1: "http://img5.imgtn.bdimg/it/u=166380803,562422762&fm=26&gp=0.jpg",
img2: "http://img4.imgtn.bdimg/it/u=3658087743,1028297051&fm=26&gp=0.jpg",
x: 0,
y: 0,
hiddenimg: true
},
moveimg: function (e) {
var that = this;
prex = e.detail.x;
console.log('moveimg', prex)
},
touchendimg: function (e) {
console.log('touchendimg', prex)
var that = this;
if (prex < -200 || prex > 200) {
that.setData({
hiddenimg: false,
}, () => {
setTimeout(function () {
that.setData({
hiddenimg: true,
img1: that.data.img2
})
}, 300)
})
} else {
setTimeout(function () {
that.setData({
x: 0,
y: 0
})
}, 300)
}
},
})
效果图：
index.wxml:
<view class="mask-movable">
<image style="position:absolute;z-index:-1;height: 600rpx; width: 492rpx;" mode='scaleToFill' src='{{img2}}'></image>
<movable-area wx:if="{{hiddenimg}}" style="height: 160vh; width: 260vw; background: transparent;">
<movable-view style="height: 600rpx; width: 492rpx;background: transparent;" x="{{x}}" y="{{y}}" direction="all" bindchange="moveimg">
<image bindtouchend="touchendimg" bindtouchcancel='touchendimg' style="width:100%;height:100%;" mode='scaleToFill' src='{{img1}}'></image>
</movable-view>
</movable-area>
</view>
index.wxss
page{
width:100%;
height:100%;
overflow:hidden;
}
.mask-movable{
width: 492rpx;
height: 600rpx;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
index.js
var prex = 0;
const app = getApp()
Page({
data: {
img1: "http://img5.imgtn.bdimg/it/u=166380803,562422762&fm=26&gp=0.jpg",
img2: "http://img4.imgtn.bdimg/it/u=3658087743,1028297051&fm=26&gp=0.jpg",
x: 0,
y: 0,
hiddenimg: true
},
moveimg: function (e) {
var that = this;
prex = e.detail.x;
console.log('moveimg', prex)
},
touchendimg: function (e) {
console.log('touchendimg', prex)
var that = this;
if (prex < -200 || prex > 200) {
that.setData({
hiddenimg: false,
}, () => {
setTimeout(function () {
that.setData({
hiddenimg: true,
img1: that.data.img2
})
}, 300)
})
} else {
setTimeout(function () {
that.setData({
x: 0,
y: 0
})
}, 300)
}
},
})