weex组件封装

组件封装调用:

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.wefoo1.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即可查看效果

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值