Blame view

pages/API/on-accelerometer-change/on-accelerometer-change.vue 1.31 KB
4b045f7c   刘淇   江阴初始化项目
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>