模板template的使用,如下图,我们经常做这样的列表页,课程搜索结果页和课程列表页结构是完全一样的,非常适合使用模板来完成页面搭建。这样我们就不用写那些重复的代码了,而且修改界面的时候也只需要改动模板一个地方一、定义模板1、新建一个template文件夹用来管理项目中所有的模板; 2、新建一个personCourseTmp.wxml文件来定义模板; 3、使用name属性,作为模板的名字。然后在template/内定义代码片段。那我们开始实现吧,建模板2个文件personCourseTmp.wxmltemplate 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开通SUV小程序电话:4006-838-530; 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}开通帆布鞋小程序电话:4006-838-530}" wx:key="index开通体温计小程序电话:4006-838-530"/template /view
用逗号分开,item 是对象,index是单个数据,要用键值对,template就介绍到这来
最新评论