// back-home.js
Component({
properties: {
itemWidth: {
type: Number,
value: 64,
},
itemHeight: {
type: Number,
value: 64,
},
gapWidth: {
type: Number,
value: 10,
},
coefficientHeight: {
type: Number,
value: 0.72,
},
},
data: {
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
top: 0,
left: 0,
clientWidth: 0,
clientHeight: 0,
},
attached() {
const systemInfo = wx.getSystemInfoSync();
this.setData({
clientWidth:systemInfo.windowWidth,
clientHeight:systemInfo.windowHeight
})
this.setData({
left: this.data.clientWidth - this.data.itemWidth - this.data.gapWidth,
top: this.data.clientHeight *this.data.coefficientHeight,
});
},
methods: {
handleTouchStart(e) {
this.setData({
startX:e.touches[0].clientX,
startY:e.touches[0].clientY
})
},
handleTouchMove(e) {
const touch = e.touches[0];
const offsetX = touch.clientX - this.data.startX;
const offsetY = touch.clientY - this.data.startY;
this.data.moveX = offsetX;
this.data.moveY = offsetY;
this.setData({
left: this.data.left + offsetX,
top: this.data.top + offsetY,
});
this.data.startX = touch.clientX;
this.data.startY = touch.clientY;
},
handleTouchEnd() {
this.adjustPosition();
this.setData({
moveX: 0,
moveY: 0,
});
},
goCreatePage() {
this.triggerEvent('goManage');
},
adjustPosition() {
if (this.data.left < 0 || this.data.left<this.data.clientWidth/3) {
this.setData({ left: 0 });
} else if (this.data.left > this.data.clientWidth - this.data.itemWidth - this.data.gapWidth || this.data.left>this.data.clientWidth/3) {
this.setData({ left: this.data.clientWidth - this.data.itemWidth - this.data.gapWidth });
}
if (this.data.top < 0) {
this.setData({ top: 0 });
} else if (this.data.top > this.data.clientHeight - this.data.itemHeight - this.data.gapWidth) {
this.setData({ top: this.data.clientHeight - this.data.itemHeight - this.data.gapWidth });
}
},
},
});
wxml文件
<!-- back-home.wxml -->
<view
class="backHome"
style="width: {{itemWidth}}px; height: {{itemHeight}}px; left: {{left}}px; top: {{top}}px;"
bindtap="goCreatePage"
bindtouchstart="handleTouchStart"
bindtouchmove="handleTouchMove"
bindtouchend="handleTouchEnd"
>
<image src="../../assets/image/GoBook.png" mode="widthFix"></image>
</view>
wxss文件
/* back-home.wxss */
.backHome {
position: fixed;
z-index: 9;
}
.backHome image {
width: 100%;
height: 100%;
}