E企盈小程序营销工具技术服务商 热线:4006-838-530

小程序模板template的使用,以及传递集合数据

E企盈小程序直播系统

模板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;  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就介绍到这来

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序模板template的使用,以及传递集合数据
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏