小程序(四):模板

数据:

// index.js内的数据
//数据名要对应模板定义的数据名
//数据要在引入的页面定义
userinfo: [
{nickName: '张三',country: '中国',city: '淄博',language: '汉语'},
{nickName: '李四',country: '美国',city: '西雅图',language: '英语'},
{nickName: '王五',country: '英国',city: '曼彻斯特',language: '西班牙语'},
]

1、include 

<!-- template.wxml 页面 -->
<view wx:for='{{userinfo}}' wx:for-item='label' wx:key='index'>
<view>{{index+1}}:</view>
<view>nickName:{{label.nickName}}</view>
<view>country:{{label.country}}</view>
<view>city:{{label.city}}</view>
<view>language:{{label.language}}</view>
<view>--------------------------------------</view>
</view>
<!-- index.wxml 页面 -->
<include src='../../components/template/template.wxml' />
<!-- include 引入整个页面,无法引入template标签 -->

2、import

<!-- template.wxml 页面 -->
//必须给template定义name
<template name='template1'>
<view wx:for='{{userinfo}}' wx:for-item='label' wx:key='index'>
<view>{{index+1}}:</view>
<view>nickName:{{label.nickName}}</view>
<view>country:{{label.country}}</view>
<view>city:{{label.city}}</view>
<view>language:{{label.language}}</view>
<view>--------------------------------------</view>
</view>
</template>
<!--index.wxml 页面-->
//按name引入template页面的内容,只引入template对应name标签内的内容
//
<import src='../../components/template/template.wxml' />
<template is='template1' data='{{userinfo}}' />

3、展示的相同的内容

猜你喜欢

转载自www.cnblogs.com/xinchenhui/p/10423170.html
今日推荐