微信小程序里 template 模块的具体使用方式解析

<template name=&#39;listTmp&#39;><view>

  <view>

    <image src=&#39;/images/avatar/0.png&#39;></image>

    <text>may 9 2018</text>

  </view>

  <text>火影村</text>

  <image src=&#39;/images/detail/carousel/6.jpg&#39;></image>

  <text>火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火</text>

  <view>

    <image src=&#39;/images/icon/view.png&#39;></image>

    <text>88</text>

    <image src=&#39;/images/icon/star.png&#39;></image>

    <text>88</text>

  </view></view></template>

.tmpContainer{

  display: flex; 

  flex-direction: column;

  }

.avatar_date image{

  width: 60rpx; 

  height: 60rpx; 

/* 把此元素放置在父元素的中部。就可以让图片与文字都在中间了 */

  vertical-align: middle; 

  margin-right: 10rpx;

  }

.avatar_date {

  padding: 10rpx;

  }

.avatar_date text{

  font-size: 32rpx;

  }

.company{

  margin-left: 10rpx; 

  font-size: 36rpx; 

  font-weight: 700; 

  margin: 10rpx;

  }

.contentImg{

  width: 100%; 

  height: 460rpx;

  }

.content{

  font-size: 32rpx; 

  /* 段落首字母缩进两个字 */

  text-indent: 64rpx;

  }

.collection_love image{

  width: 32rpx; 

  height: 32rpx; 

  vertical-align: middle; 

  margin-right: 10rpx;

  }

.collection_love text{

  font-size: 28rpx; 

  margin-right: 10rpx;

  }

<!-- 在头部引入,注意结尾别忘了/ -->

<import src=&#39;/pages/template/list-template.wxml&#39;/>