小程序使用模板

使用模板：

 <!-- 引入模板 -->
 <import  src="../productList/productList.wxml"></import>

 <!-- 使用模板
语法： <template  is='模板名字' ></template>
说明：1：template 双标签  里面不能写内容 不显示
2：单标签 <template  is='prouductList></template>'
3：template组件不会渲染  类似block包裹容器
-->
<template  is='productList'>模板使用</template>
<template  is='productList'></template>
<template  is='productList'></template>
<template  is='productList'></template>
<template  is='productList'></template>
<template  is='productList'></template>

本页面需要引进样式：
/* pages/about/about.wxss */

@import   '../productList/productList.wxss';

引进的页面：

<text>pages/productList/productList.wxml</text>
<template  name="productList">
  <view class="list">
     <view class="img">图片</view>
     <view class="text">文字</view>
  </view>
</template>

css:

 /* pages/productList/productList.wxss */
.list{
  display: flex;
  padding-bottom: 10rpx;
  border-bottom: 1rpx  solid  #eee; 
  margin-top: 20rpx;
}
.img{
  width: 240rpx;
  height: 240rpx;
  background: pink;
}
.text{
  flex: 1;
  padding-left: 30rpx;
}

效果如图：