注意点:它不能单独显示,必须依附于Page
template定义
模板.wxml 定义的时候,必须在最外层写上一个template标签,并且写上名字 <template name="course"> <view class="course" style="background-color:{{color}};"> <view> <text class="title">{{title}}</text> </view> <view> <text class="subtitle">{{subtitle}}</text> </view> </view> </template> 在需要的文件中导入模板: <import src="../../templates/course/course.wxml" /> 使用及传参: <!-- 热门课程的scroll-view --> <scroll-view scroll-x> <block wx:for="{{courses}}" wx:key="{{item.id}}"> <template is="course" data="{{...item}}" /> </block> </scroll-view> 模板.wxss需要在使用模板的页面的wxss中通过@import 导入 course.wxss文件: .course{ display: inline-block; width: 300rpx; height: 160rpx; margin-right: 10rpx; border-radius: 10rpx; padding-left: 10rpx; } .title,.subtitle{ color:#fff; font-size: 12px; } .subtitle{ font-size: 10px; } 在需要的文件样式中导入模板样式: @import "../../templates/course/course.wxss";页面中如何使用它,并且给它传值 通过data属性,传递过去,内容比较多的时候,使用展开运算符
作用: 显示一些简单的内容,他不具备交互能力,不能处理逻辑
步骤: 1、定义 创建两个文件 template.wxml、template.wxss template.wxml 最外层包裹一个 template并且要写好name 2、在页面中使用时候,先在页面的wxml和wxss中导入 wxml <import /> wxss @import ""; 3、在页面中通过 template 标签使用,并且通过data属性传值 <template is="模板的名字" data="{{...对象}}" />