zoukankan      html  css  js  c++  java
  • template模板的使用方法

    模板


    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
    定义模板

    使用name属性,作为模板的名字。然后在<template/>内定义代码片段
    使用模板

    使用is属性,声明需要的使用的模板,然后将模板所需要的data传入

    模板的作用域

    模板拥有自己的作用域,只能使用data传入的数据。
    example:
    定义模板 
    <template name="homecell">
         <view class="item">
                <image class="poster" src="{{item.images.small}}" />
                <view class="meta">
                    <text class="title">{{item.title}}</text>
                    <text class="sub-title">{{item.original_title}}({{item.year}})</text>
                    <view class="artists">
                        <text wx:for="{{item.directors}}">{{item.name}}</text>
                    </view>
                </view>
                <view class="rating">
                    <text>{{item.rating.average}}</text>
                </view>
        </view>
     </template>
    使用模板
    <import src="../../commonXml/homecell.wxml" />  //引入模板
    <loading hidden="{{!loading}}">加载中...</loading>
    <scroll-view scroll-y="true" class="page-body">
        <navigator wx:for="{{movies}}" url="../movie/movie?id={{item.id}}">
           <template is="homecell" data="{{item}}"></template>  //声明需要的使用的模板使用data传入的数据。
        </navigator>
    </scroll-view>
  • 相关阅读:
    收藏随笔
    Jquery根据元素ID判断该元素是否存在
    DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异
    css3 boxsizing属性
    常见CSS属性及值
    Pycharm学习记录注释
    python之reload用法
    python之sorted用法
    android studio目录结构浅析
    纪念开通博客
  • 原文地址:https://www.cnblogs.com/tian-sun/p/7405837.html
Copyright © 2011-2022 走看看