小程序-模板

模板,顾名思义,创建一个可以不断复制粘贴的板块。WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

使用场景

①列表的item项多次使用
②想单独抽取出来的布局
③功能比较独立的视图

定义模板

比如,很多列表页面底部都需要一个加载更多的loading效果。代码如下:
load-more.wxml :


根标签需要使用标签,name属性是此模板的名字,在使用的时候会用到。template标签里面的就写自己想实现的效果的布局。

load-more.wxss :

.loading-more {
  text-align: center;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.loading-more image {
  width: 30rpx;
  height: 30rpx;
}

.loading-more text {
  margin-left: 10rpx;
  font-size: 10pt;
  color: #888;
}
使用模板

usepage.wxml:



在wxml中使用import导入模块,is属性即是导入模板的名字,data属性是传入在模板中使用的数据。
usepage.wxss:

@import '/template/load-more/load-more.wxss';

在wxss中使用@import导入模块的样式。

is和data

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板

就是可以使用三目运算符来选择使用那个模板。