258资源分享网

前言

微信小程序中提供了template使用，即相同的板块可以进行代码互用，如下方的效果图，就可以用template。

效果图

模板最重要的是模板的名称，即"" 
以下是实例模板代码

<templatename="postItem">

<viewclass='post-container'>

<viewclass='post-author-date'>

<imageclass='post-author'src='{{avatar}}'></image>

<textclass='post-date'>{{date}}</text>

</view>

<textclass='post-title'>{{title}}</text>

<imageclass='post-image'src='{{imgSrc}}'></image>

<textclass='post-content'>{{content}}</text>

<viewclass='post-like'>

<imageclass='post-like-image'src='/images/icon/chat.png'></image>

<textclass='post-link-text'>{{collection}}</text>

<imageclass='post-like-image'src='/images/icon/view.png'></image>

<textclass='post-link-text'>{{reading}}</text>

</view>

</view>

</template>

wxss文件

.post-container {

display: flex;

flex-direction: column;

margin-top:20rpx;

margin-bottom:40rpx;

background-color: white;

border-bottom:1px solid #ededed;

border-top:1px solid #ededed;

padding-bottom:5px;

}

.post-author-date {

margin:10rpx020rpx10rpx;

}

.post-author {

width:60rpx;

height:60rpx;

vertical-align: middle;

}

.post-date {

margin-left:20rpx;

vertical-align: middle;

margin-bottom:5px;

font-size:26rpx;

}

.post-title {

font-size:34rpx;

font-weight:600;

color:#333;

margin-bottom:10px;

margin-left:10px;

margin-right:10px;

}

.post-image {

margin-left:16px;

width:100%;

height:340rpx;

margin:auto0;

margin-bottom:15rpx;

}

.post-content {

color:#666;

font-size:28rpx;

margin-bottom:20rpx;

margin-left:20rpx;

margin-right:20rpx;

letter-spacing:2rpx;

line-height:40rpx;

}

.post-like {

font-size:13px;

flex-direction: row;

line-height:16px;

margin-left:16px;

color: gray;

}

.post-like-image {

height:16px;

width:16px;

margin-right:8px;

vertical-align: middle;

}

.post-link-text {

vertical-align: middle;

margin-right:20px;

}