模板template的使用,
如下图,我们经常做这样的列表页,课程搜索结果页和课程列表页结构是完全一样的,非常适合使用模板来完成页面搭建。
这样我们就不用写那些重复的代码了,而且修改界面的时候也只需要改动模板一个地方
一、定义模板
1、新建一个template文件夹用来管理项目中所有的模板;
2、新建一个personCourseTmp.wxml文件来定义模板;
3、使用name属性,作为模板的名字。然后在template/内定义代码片段。
那我们开始实现吧,建模板2个文件
personCourseTmp.wxml
template name="personCourseItemTmp" view class="courses-list" style='background-image: url("{{cardImage}}")' view class="money-border" ¥ text class="money"{{cardMoney}}/text/课时/view view class="name" text class="ename"GillMo/text text class="cname".小川/text /view view class="mark" view{{cardMark}}/view /view /view/template样式文件personCourseTmp.wxss
.courses-list { height: 342rpx; margin: 40rpx auto; border-top: 2rpx solid #f0f0f0; margin-top: 10rpx; flex-direction: column; align-items: flex-start; width: 670rpx; border-radius: 8px;}.money-border { font-family: PingFangSC-Semibold; font-size: 28rpx; color: #fff; letter-spacing: -0.41px; height: 56rpx; margin-top: 20rpx; margin-left: 20rpx;}.money { font-size: 40rpx;}.name { margin-top: 158rpx; margin-left: 20rpx; font-family: PingFangSC-Semibold; color: #fff; letter-spacing: -0.41px;}.ename { font-size: 40rpx;}.cname { font-size: 30rpx;}.mark { font-family: PingFangSC-Regular; font-size: 28rpx; color: #fff; margin-left: 20rpx; letter-spacing: -0.41px; margin-bottom: 18rpx;}那我们如何在页面上使用呢,引入样式文件和视图文件
比如我们要在Course.wxss上面引入样式文件
@import "../template/personCourseTmp.wxss";只需要在Course.wxss里面加入上面的代码
我们要在Course.wxml上面引入视图文件
import src="../template/personCourseTmp.wxml" / block wx:for="{{goodlist}}" wx:key="idx" template is="personCourseItemTmp" data="{{...item}}"/template /navigator /block传数据时item前面加三个点... 模板里面就不需要写item了,
如果要传多个数据到模板
view class="tab-list" wx:for="{{list}}" wx:key="index" template is="day-tab" data="{{item,index:index,currentTarget:currentTarget}}" wx:key="index"/template /view用逗号分开,item 是对象,index是单个数据,要用键值对,template就介绍到这来













