Template模板的使用

template解决重复问题

wx:for解决代码重复只在当前页面，不能跨多个页面 如果跨多个页面可以使用template模板

创建post-item-template.wxml

在posts文件中新建post-item文件夹 在post-item文件夹中创建post-item-template.wxml

• 代码

<template name="postItem">
 <view class='post-container'>
   <view class='post-author-date'>
     <image wx:if="模板:Item.img condition" class='post-author' src="模板:Item.avatar"></image>
     <text class='post-date'>模板:Item.date</text>
   </view>
   <text class='post-title'>模板:Item.title</text>
   <image class='post-image' src="模板:Item.imgSrc"></image> 
   <text class='post-content'>模板:Content</text>
   <view class='post-like'>
     <image class='post-like-image' src='../../images/icon/01.jpg'></image>
     <text class='post-like-font'>模板:Item.collection</text>
     <image class='post-like-image' src='../../images/icon/02.jpg'></image>
     <text class='post-like-font'>模板:Item.reading</text>
   </view>
 </view>
</template>

改写post.js中代码,并引用post-item-template.wxml 格式：<import src="引用路径" />

• 代码

<import src="post-item/post-item-template.wxml" />
 <view>
  <swiper indicator-indicator-dots='true' autoplay='true' interval='5000'>
   <swiper-item><image src='/images/04.jpg'></image></swiper-item>
   <swiper-item><image src='/images/02.jpg'></image></swiper-item>
   <swiper-item><image src='/images/03.jpg'></image></swiper-item>
  </swiper>
  <block wx:for="模板:Posts key" wx:for-item="item" wx:for-index="idx">
  <template is="postItem" data="模板:Item" />
</block>
</view> 
</block>
</view>

创建post-item-template.wxss

在post-item文件夹中创建post-item-template.wxss

• 代码

.post-author-date{

 margin: 10rpx 0 20rpx 10rpx;

}

.post-author{

 width: 60rpx;
 height: 60rpx;
 border-radius: 50%;
 vertical-align: middle;

}

.post-date{

 margin-left: 20rpx;
 vertical-align: middle;
 margin-bottom: 10px;
 font-size: 26rpx;

}

.post-title{

 font-size: 34rpx;
 font-weight: 600;
 color: #333;
 margin-bottom: 10px;
 margin-left: 10px;

}

.post-image{

 margin-left: 16px;
 width: 100%;
 height: 340rpx;
 margin: auto 0;
 margin-bottom: 15px;

}

.post-content{

 color: #666;
 font-size: 28rpx;
 margin-bottom: 20rpx;
 margin-left: 20rpx;
 letter-spacing: 2rpx;
 line-height:40rpx;

}

.post-like{

 font-size: 13px;
 flex-direction: row;
 line-height: 16px;
 margin-left: 10px;

}

.post-like-image{

 width: 16px;
 height: 16px;
 margin-left: 8px;
 vertical-align: middle;

}

.post-like-font{

 vertical-align: middle;
 margin-right: 20px;

}

改写post.wxss代码，并引用post-item-template.wxss 格式：@import "....";

• 代码

@import "post-item/post-item-template.wxss"; swiper{

 width: 100%;
 height: 600rpx;

} swiper image {

 width: 100%;
 height: 600rpx;

} .post-container{

 display: flex;
 flex-direction: column;
 margin-top: 20rpx;
 margin-bottom: 40rpx;
 background-color: #fff;
 border-top: 1px solid #ededed;
 border-bottom: 1px solid #ededed;
 padding-bottom: 5px;

}

注意：本节中wxml和wxss两种引用不同，前者为<import src="引用路径" />，后者则是@import "....";