微信小程序template模板实例详解

<template name="postItem"> <view class='post-container'>  <view class='post-author-date'>   <image class='post-author' src='{{avatar}}'></image>   <text class='post-date'>{{date}}</text>  </view>  <text class='post-title'>{{title}}</text>  <image class='post-image' src='{{imgSrc}}'></image>  <text class='post-content'>{{content}}</text>  <view class='post-like'>   <image class='post-like-image' src='/images/icon/chat.png'></image>   <text class='post-link-text'>{{collection}}</text>   <image class='post-like-image' src='/images/icon/view.png'></image>   <text class='post-link-text'>{{reading}}</text>  </view> </view></template>

 .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: 10rpx 0 20rpx 10rpx;}.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: auto 0; 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;}

<import src="post-item/post-item-template.wxml" /><view> <block wx:for="{{postList}}" wx:for-item="item">   <template is="postItem" data="{{...item}}" /> </block></view>

@import 'post-item/post-item-template.wxss';