微信小程序开发详解---小知识，大功能【实现按钮的随着手指移动】

一.功能点说明

1. 获取屏幕的宽和高

var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;

2.设置图片全屏

wxss设置：

width: 100%;height: 100vh;

切记

height:100%

是不可行的，图片加载不出来

vh和vw：vh等于viewport高度的1/100；vw等于viewport宽度的1/100。了解更多CSS单位

.container {
position: relative;
width: 100%;
height: 100vh;
padding-left: 20rpx;
padding-right: 20rpx;
padding-top: 20rpx;
padding-bottom: 20rpx;
}

.screen {
width: 100%;
height: 100vh;
}

wxml设置：

<view class="container">
<image class="screen" src="{{imageurl}}"></image>
<view>

3.

catchtouchstart

，

catchtouchmove

，

catchtouchend

和

bindtap

事件冲突问题

事件绑定的写法同组件的属性，以 key、value 的形式。

key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本

1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。

value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

更多微信小程序事件处理

因为catch事件绑定可以阻止冒泡事件向上冒泡，所以在执行完

catchtouchend

之后，阻止了事件向上传递，

bindtap

就不会执行了，直接

catchtouchstart

，

catchtouchmove

，

catchtouchend

更换为

bindtouchstart

，

bindtouchmove

，

bindtouchend

即可。

No Code，No Truth。

原代码：

<image class="refresh" src="{{refreshImageUrl}}" bindtap="reloadScreen" catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style='top:{{buttonTop}}px;left:{{buttonLeft}}px;'></image>

修正之后：

<image class="refresh" src="{{refreshImageUrl}}" bindtap="reloadScreen" bindtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style='top:{{buttonTop}}px;left:{{buttonLeft}}px;'></image>

4.在方法中获取和赋值data数据

在方法中获取data中的数据：

this.data.imageurl

在方法中设置data中的数据：

this.setData({});

在子方法【方法中的方法，如

setTimeout

】中获取和data中的数据：

（1）在方法中创建一个局部变量，并将this赋值给该变量，如

var self = this;

（2）获取数据：

self.data.imageurl

（3）设置数据：

self.setData({ imageurl: tempImageUrl});

data: {
imageurl: "../../drawable/image1.png",
buttonTop: 0,
buttonLeft: 0,
refreshImageUrl:"../../drawable/refresh.png"
},
reloadScreen: function () {
var self = this;
console.log("reloadScreen");
wx.showLoading({
title: '图片加载中......',
})
var tempImageUrl ;
if (this.data.imageurl === "../../drawable/image1.png"){
tempImageUrl = "../../drawable/screen.jpg"
}else{
tempImageUrl = "../../drawable/image1.png"
}
setTimeout(function () {
console.log("tempImageUrl:" + self.data.imageurl);
self.setData({
imageurl: tempImageUrl
});
wx.hideLoading();
}, 2000)
},

5.设置一个文件中的全局变量

如果希望一个变量在整个文件中通用，将变量的定义放在Page外面；

var windowWidth;
var windowHeight;
Page({
data: {
imageurl: "../../drawable/image1.png",
buttonTop: 0,
buttonLeft: 0,
refreshImageUrl:"../../drawable/refresh.png"
},
onLoad: function (options) {
windowWidth = wx.getSystemInfoSync().windowWidth;
windowHeight = wx.getSystemInfoSync().windowHeight;
}
}）

6.按钮随着手指移动

先上效果图



实现原理：其中60是悬浮窗的宽高

buttonStart: function (e) {
var startPoint = e.touches[0];
this.setData({
refreshImageUrl: "../../drawable/refresh_press.png"
})
},
buttonMove: function (e) {
var endPoint = e.touches[e.touches.length - 1];
var tempTop = 0;
var tempLeft = 0;
console.log("endPoint.clientY:" + endPoint.clientY);
console.log("endPoint.clientX:" + endPoint.clientX);
if (endPoint.clientY < 30) {
tempTop = 0
} else if (endPoint.clientY > windowHeight-60) {
tempTop = windowHeight - 60
} else {
tempTop = endPoint.clientY - 30
}
if (endPoint.clientX < 30) {
tempLeft = 0
} else if (endPoint.clientX > windowWidth - 60) {
tempLeft = windowWidth - 60
} else {
tempLeft = endPoint.clientX - 30
}

console.log("buttonEnd tempTop:" + tempTop);
this.setData({
buttonTop: tempTop,
buttonLeft: tempLeft
})
},
buttonEnd: function (e) {
var endPoint = e.changedTouches[0];
console.log("buttonEnd endPoint.clientY:" + endPoint.clientY);
console.log("buttonEnd endPoint.clientX:" + endPoint.clientX);
var tempTop = 0;
var tempLeft = 0;
if (endPoint.clientY < 30) {
tempTop = 0
} else if (endPoint.clientY > windowHeight - 60) {
tempTop = windowHeight - 60
} else {
tempTop = endPoint.clientY - 30
}
if (endPoint.clientX < 30) {
tempLeft = 0
} else if (endPoint.clientX > windowWidth - 60) {
tempLeft = windowWidth - 60
} else {
tempLeft = endPoint.clientX - 30
}
console.log("buttonEnd tempTop:" + tempTop);
this.setData({
buttonTop: tempTop,
buttonLeft: tempLeft,
refreshImageUrl: "../../drawable/refresh.png"
})
}
,

完整代码地址