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

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

浏览量:645 时间: 来源:江小白miss

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


版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎