微信小程序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操作