• 微信号:wumiao_357234902

微信小程序模板 template 的使用

作者:Miao 阅读:3505次

template可以理解为:通用模板、通用函数,就是可以在多个地方重复使用,可以减少代码冗余,也管理方便,使用比较方便。


举个栗子:

如图所示,像购物类小程序,猜您喜欢这种板块一般都会在多个地方出现,咱们可以把wxml里的代码提取出来,放到template里,通过数据传输,就可以达到不同地方使用同一样式,展示内容不一样的效果。

就算遇到需要调整样式,也一点都不用慌,因为就改一个地方而已。


下面贴代码

template.wxml

  • name:模板名字

  • list:由调用页面传输过来的数据列表,当然数据可以是数组、字符串等等。

<!-- 商品排列通用样式 -->
<template name="goods-style">
	<block wx:for="{{list}}" wx:key="">
		<view class="list">
			<navigator url="{{item.url}}">
				<image src="{{item.icon}}"></image>
				{{item.goodsname}}
			</navigator>
		</view>
	</block>
</template>

引用template

<import src="../template/template.wxml" />
@import "../template/template.wxss";


页面使用

<template is="goods-style" data="{{listName:list,size:300}}"></template>

data里放入的就是需要传输的参数,可以多个。实例传的商品列表和展示宽度。可根据实际情况在不同页面展示不同大小的效果。

本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!

如果侵犯了您的权益,请来信告知我们下线删除,邮箱:357234902@qq.com