微信小程序template使用

当项目需多次使用同一布局和样式时,可使用template模板减少冗余代码。使用时先新建template文件夹存放通用模板,在其中新建wxml和wxss定义模板与样式,设置模板name和内容、样式,在需使用的页面和wxss文件导入,最后在页面使用模板,还可利用ES6展开运算符简化数据绑定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当您的项目需要多次使用同一个布局和样式的时候,您就可以考虑使用template(模板)来减少冗余代码。

使用方式:

1.新建一个template文件夹来存放您的通用模板;

2.在文件夹里面新建一个wxml,wxss,进行模板和样式的定义;

3.设置模板的name,以及里面您需要定义的wxml内容;

4.设置wxss样式;

5.在需要使用的页面使用import导入该wxml页面,注意路径位置;

6.在需要使用的wxss文件导入该wxss;

7.在页面上使用该模板,通过is判断使用哪个模板,这里我们使用name为courseStudent模板(此处使用的是列表循环,所以data值为item);

 

若将data使用ES6 展开运算符‘...’,则模板里面绑定数据就不需要在前面加入item了

复制代码

<!--使用ES6展开运算符 -->
<template is="courseStudent" data="{{...item}}"></template>

<template name="courseStudent">
  <!-- 此处渲染数据的时候就不需要使用 item.xxx了-->  
  <view>{{courseName}}</view>
</template>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值