美文网首页
小程序template使用

小程序template使用

作者: Easy_VO | 来源:发表于2018-01-11 15:30 被阅读305次

做小程序用到了<template></template>模板的使用,感觉挺新奇的,其实你可以理解类比到其他开发中,比如iOS中自定义UI,这就相当于一个自定义的ui我认为;

//展示页js
var app = getApp() 
page({
   eggs:{
        data:[1,2,3,4,5,6,7,8,9]      //模板页用来展示的数据
       }
  
})
<import src="../template/template.wxml"/>  //引入模板的wxml文件

<view class="container">
 <template is="{{eggs.data.length> 0 ? 'data' : 'noData'}}" data="{{...eggs}}"></template>   //此时进行判断该用哪个模板-->判断template 的name属性,eg是指要传入模板的数据
</view>
<template name="noData">     //模板有name属性
<view>
       没有数据哦!
</view>
</template>

<template name="data">      //模板有name属性
<view wx:for='{{data}}' wx:key='{{key}}'> 
<view>{{item}}</view> 
</view>
</template>     //此时循环的data是eggs{data:[...]}

继续写项目中。。。。

相关文章