第6课 微信小程序模板的引入与使用:
在template1.wxml中自定义一个wxml模板:
<template>定义模板标签</template>
在template1.wxss中为模板设置wxss样式:
在index1.wxml页面内引入模板:
<!-- wxml内引入自定义的模板 路径 -->
<import src="../template1/template1.wxml" />
在index1.wxss页面内引入模板样式:
/* wxss内引入自定义的模板样式 路径 */
@import "../template1/template1.wxss"
——————————————————
若只想创建与引入模板查看上面部分即可
——————————————————
以下是模板渲染数据的实际应用:
template1.wxml代码:
<!-- template标签用来创建模板 name="article":模板的名称为article -->
<template name="article">
<view class="title">{{title}}</view>
<view class="content">{{content}}</view>
</template>
template1.wxss代码:
/* 这是templata1.wxss文件 引入模板时也需要引入wxss样式 */
.title{
background-color: pink;
}
.content{
background-color: green;
}
index1.js代码:
// pages/index1/index1.js
Page({
/*data页面的初始数据*/
data: {
news:[ //模拟新闻数据
{
title: "新闻1",
content: "新闻1的内容"
},
{
title: "新闻2",
content: "新闻2的内容"
},
{
title: "新闻3",
content: "新闻3的内容"
},
]
}
})
index1.wxml代码:
<!-- 引入自定义的模板 -->
<import src="../template1/template1.wxml" />
<text>我的页面</text>
<!-- 引入name为article的模板 for遍历data中的news数据 通过data属性传递给模板-->
<template is="article" wx:for="{{news}}" data="{{...item}}" />
index1.wxss代码:
/* pages/index1/index1.wxss */
/* 引入模板的wxss样式 */
@import "../template1/template1.wxss"