on-accelerometer-change.vue
1.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<!-- #ifdef APP-PLUS -->
<view class="uni-btn-v">
<button class="shake" @tap="shake">摇一摇</button>
</view>
<!-- #endif -->
<view class="uni-btn-v">
<button type="primary" @tap="watchAcce">监听设备的加速度变化</button>
<button type="primary" @tap="stopAcce">停止监听设备的加速度变化</button>
</view>
<view class="uni-textarea uni-common-mt">
<textarea class="acc-show" :value="value" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'onAccelerometerChange',
value: ''
}
},
onUnload() {
uni.stopAccelerometer();
},
methods: {
//#ifdef APP-PLUS
shake() {
uni.navigateTo({
url: '/platforms/app-plus/shake/shake'
})
},
//#endif
watchAcce() {
uni.onAccelerometerChange((res) => {
this.value = "监听设备的加速度变化:\n" + "X轴：" + res.x.toFixed(2) + "\nY轴：" + res.y.toFixed(2) +
"\nZ轴：" + res.z.toFixed(2);
})
},
stopAcce() {
uni.stopAccelerometer()
}
}
}
</script>
<style>
.shake {
background-color: #FFCC33;
color: #ffffff;
margin-bottom: 50rpx;
}
.uni-textarea .acc-show{
height: 240rpx;
}
</style>