새 템플릿

새 게시물 항목 템플릿 디렉토리 및 작성 후 항목-template.wxml 및 사후 아이템 template.wxss 파일
그림 삽입 설명 여기

템플릿에 코드를 포팅

post.wxml 코드 다음 코드는 이제 템플릿으로 후 컨테이너 노드가 될 것이다.
그림 삽입 설명 여기

이후 아이템 template.wxml 파일에 포스트 컨테이너 노드 코드

<!-- post-item-template.wxml -->

<template name="postItem">
  <view class="post-container">
    <view class="post-author-date">
      <image 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">{{item.content}}</text>
    <view class="post-like">
      <image class="post-like-image" src="/images/icon/chat.png"></image>
      <text class="post-like-font">{{item.collection}}</text>

      <image class="post-like-image" src="/images/icon/view.png"></image>
      <text class="post-like-font">{{item.reading}}</text>
    </view>
  </view>
</template>

후 항목-template.wxss에 관련 코드를 post.wxss

.post-container{
    flex-direction:column;
    display:flex;
    margin-top:20rpx;
    margin-bottom:40rpx;
    margin-left: 0rpx;
    background-color:#fff;
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
    padding-bottom: 5px;
}

.post-author-date{
    margin-top:10rpx;
    margin-bottom: 20rpx;
    margin-left: 10px;
}

.post-author{
    width:60rpx;
    height:60rpx;
    vertical-align: middle;
}

.post-date{
    margin-left: 20px;
    vertical-align: middle;
}

.post-image{
    width:100%;
    height:340rpx;
    margin:auto 0;
    margin-bottom: 15px;
}

.post-date{
    font-size:26rpx;
    margin-bottom: 10px;
}
.post-title{
    font-size:34rpx;
    font-weight: 600;
    color:#333;
    margin-bottom: 10px;
    margin-left: 10px;
}
.post-content{
    color:#666;
    font-size:28rpx;
    margin-bottom:20rpx;
    margin-left: 20rpx;
    letter-spacing:2rpx;
    line-height: 40rpx;
}
.post-like{
    font-size:13px;
    line-height: 16px;
    margin-left: 10px;
}

.post-like-image{
    height:16px;
    width:16px;
    margin-right: 8px;
    vertical-align:middle;
}

.post-like-font{
    vertical-align:middle;
    margin-right: 20px;
}

템플릿의 도입

Wxml 템플릿에서 post.wxml에 도입 :

<import src="post-item-template/post-item-template.wxml" />

그림 삽입 설명 여기

Wxss 템플릿은 post.wxss에 도입

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

그림 삽입 설명 여기

템플릿을 사용하여

post.wxml에서 템플릿을 사용하여

  <block wx:for="{{posts_key}}" wx:for-item="item" wx:key="postId" wx:for-index="idx">
    <!--//template-->
      <template is="postItem" data="{{item}}" />
  </block>