组件封装调用:
1、实际开发应用中,会有很多可复用的 weex 文件,这时候可以封装成 weex 组件。比如可以直接创建一个名为foo1.we
的文件,<foo1>
就是组件名
<!--foo1.we-->
<template>
<div class="container">
<div class="cell">
<image class="thumb" src="{{image}}"></image>
<text class="title">{{title}}</text>
</div>
</div>
</template>
<style>
.cell { margin-top: 10; margin-left: 10; flex-direction: row; }
.thumb { width: 200; height: 200; }
.title { text-align: center; flex: 1; color: grey; font-size: 50; }
</style>
<script>
module.exports = {
data:{
title:null,
image:null
}
}
</script>
2、test1.we
<!--test1.we-->
<template>
<foo1 title="JavaScript" image="http://t.cn/RGE3AJt"></foo1>
</template>
3、说明:foo1.we 的也包含 <template>
,<style>
和 <script>
,定义好了后,直接用<foo1>
标签即可, 注意这里test1.we
和foo1.we
是在同目录下哦
4、切换到文件目录,命令:weex test1.we即可查看效果
组件嵌套调用:
1、第一层:仍使用上面的foo1.we
2、第二层:foo2.we
<!--foo2.we-->
<template>
<div class="container">
<div class="ceil">
<text>{{description}}</text>
<foo1 repeat="{{list}}" title="{{name}}" image="{{img}}"></foo1>
</div>
</div>
</template>
<style>
.cell { margin-top: 10; margin-left: 10; flex-direction: row; }
</style>
<script>
module.exports = {
data:{
description:'',
list:[]
}
}
</script>
3、第三层:test2.we
<!--test2.we-->
<template>
<foo2 list="{{list}}"></foo2>
</template>
<script>
module.exports = {
data:{
list:[
{name:'JavaScript',img:'http://t.cn/RGE3AJt'},
{name:'java',img:'http://t.cn/RGE3uo9'},
{name:'Objective C',img:'http://t.cn/RGE31hq'}
]
}
}
</script>
4、说明:test2.we中嵌套了<foo2>,foo2.we中嵌套了<foo1>,注意这里test2.we
、foo2.we、foo1.we都
是在同目录下
5、切换到文件目录,命令:weex test2.we即可查看效果