• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之模板的使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在一个项目中需要在多处页面使用类似的模块,就需要创建模板—-减少代码量,同时代码高度复用;

一、定义模板
1、新建一个template文件夹用来管理项目中所有的模板;
2、新建一个courseList.wxml文件来定义模板;
3、使用name属性,作为模板的名字。然后在<template/>内定义代码片段。

一个.wxml文件中可以定义多个模板,只需要通过name来区分;
模板中的数据都是展开之后的属性。

<template name="courseLeft">
   这里面写你要放入的模块的代码!
</template>

  

二、使用模板
1、使用 is 属性,声明需要的使用的模板

2、将模板所需要的 data 传入,一般我们都会使用列表渲染。

<template is="" data=""></template>

<template wx:if=" is="courseLeft" data=""></template>
<template wx:else is="courseRight" data="{{...item}}"></template>

data 是要模板渲染的数据,data="{{...item}}" 写法是ES6的写法,item是wx:for当前项,... 是展开运算符,在模板中不需要再{{item.courseName}} 而是直接{{courseName}} 。

三、模板样式
1、在新建模板的时候同时新建一个courseList.wxss 的文件,与CSS同样的写法控制样式。
2、在需要使用模板的页面 .wxss文件中import进来;或者直接在app.wxss中引入,这样只需要一次引入,其他文件就不用引入了。

@import "../template/courseList.wxss";


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
120多套各种类别微信小程序模板源码打包下载发布时间:2022-07-18
下一篇:
微信小程序图片使用示例发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap