退出系统
2.0 版本 weex 版本

graceUI - weex 教程 - 通用事件

通用事件

Weex 提供了通过事件触发动作的能力,例如在用户点击组件时执行 JavaScript。下面列出了可被添加到 Weex 组件上以定义事件动作的属性:

# click

当组件上发生点击手势时被触发。
# longpress

如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。

# Appear

如果一个位于某个可滚动区域内的组件被绑定了 appear 事件,那么当这个组件的状态变为在屏幕上可见时,该事件将被触发。

# Disappear

如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件,那么当这个组件被滑出屏幕变为不可见状态时,该事件将被触发。

# stopPropagation

用于内嵌处理Native滑动冲突的情况,阻止Native事件进行冒泡传递。可结合shouldStopPropagationInterval和shouldStopPropagationInitResult属性来控制。

表单元素请参考对应的组件事件 ( :

事件调用

<template>
	<div>
		<list>
			<cell>
				<text class="text" @click="testFun()">{{test}}</text>
			</cell>
		</list>
	</div>
</template>
<script>
export default {
	data() {
		return {
			test : 'a'
		}
	},
	methods: {
		testFun : function() {
			console.log(11);
		}
	},
}
</script>
<style>
.text{width:750px; height:200px; background-color: #007AFF; margin:10px 0; font-size:50px; text-align:center; line-height:200px; color:#FFFFFF;}
</style>

事件传参

<template>
	<div>
		<list>
			<cell>
				<text class="text" @click="testFun('hi', 'grace')">{{test}}</text>
			</cell>
		</list>
	</div>
</template>
<script>
export default {
	data() {
		return {
			test : 'a'
		}
	},
	methods: {
		testFun : function(var1, var2) {
			console.log(var1, var2);
		}
	},
}
</script>
<style>
.text{width:750px; height:200px; background-color: #007AFF; margin:10px 0; font-size:50px; text-align:center; line-height:200px; color:#FFFFFF;}
</style>

appear 与 disappear

<template>
	<div>
		<list>
			<cell style="height:1500px;">
				<text class="text" @click="testFun('hi', 'grace')">{{test}}</text>
			</cell>
			<cell>
				<text class="text" @appear="appear" @disappear="disappear">{{test}}</text>
			</cell>
		</list>
	</div>
</template>
<script>
export default {
	data() {
		return {
			test : 'a'
		}
	},
	methods: {
		appear : function(e) {
			console.log(e);
		},
		disappear : function(e){
			console.log(e);
		}
	},
}
</script>
<style>
.text{width:750px; height:200px; background-color: #007AFF; margin:10px 0; font-size:50px; text-align:center; line-height:200px; color:#FFFFFF;}
</style>

利用 参数 e 可以获取到组件的更多信息哦 (: