微信小程序template

1.template中只包含wxml和wxss文件，在template下新建文件wxml和wxss

                                                   

2.将template的name属性命名，然后进行页面布局

<template name="lunbo">

<swiper autoplay="true" circular="{{circular}}" indicator-dots="true" indicator-color="rgba(255,255,255, .3)" indicator-active-color="green">

<block wx:for="{{banner}}" wx:key="banner">

<swiper-item>

<image src="{{item.url}}" class="slideImage" mode="widthFix" data-index="{{item.id}}" bindtap='test' />

</swiper-item>

</block>

</swiper>

</template>

3.在文件中通过import导入模板文件，通过is="模板的name”进行区别引用，引入css样式

index.wxml

<!--index.wxml-->

<import src="/template/lunbo/lunbo.wxml" />

<import src="/template/scrollImg/scrollImg.wxml" />

<import src="/template/zheZhao/zheZhao.wxml" />

<view class="container">

<!-- 轮播图 -->

<view>

<template is="lunbo" data="{{banner,circular}}" />

</view>

<!-- 三个logo -->

<view class='logos-style'>

<view wx:for="{{logos}}" wx:key="logos" style='width: 33%;'>

<image src='{{item.url}}' style='width: 44rpx; height: 44rpx;'></image>

<text style='display: block'>{{item.text}}</text>

</view>

</view>

<!-- 走马灯 -->

<view style='margin-top: 20rpx; background-color: #fff'>

<template is="scrollImg" data="{{perorders}}" />

</view>

</view>

<!-- 优惠券遮罩 -->

<view>

<template is="zheZhao" data="{{displaya,animationData}}"></template>

</view>

在index.wxss中引入样式

/**index.wxss**/

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

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

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

4.template中没有js文件，可在模板中声明js操作，在引用文件中实现js操作