美文网首页
小程序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:[...]}
    

    继续写项目中。。。。

    相关文章

      网友评论

          本文标题:小程序template使用

          本文链接:https://www.haomeiwen.com/subject/vvxtoxtx.html