小程序-ListView 模板引用

item布局文件（ 引用 模板）

cataTemp/index.wxml

<template name="carTemp">

  <view class="adapter_item">

    <image src="http://kks.me/HkrL" class="item_img"></image>    
    <view class="item_content">
        <text class="item_id">{{id}}</text>
        <text class="item_title">{{name}}</text>
    </view>

  </view>

</template>

carTemp/index.wxss

.adapter_item {
  padding-left: 22rpx;
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}

.item_img {
  width: 240rpx;
  height: 160rpx;
}

.item_content {
  width: 0rpx;
  height: 160rpx;
  padding-right: 20rpx;
  margin-left: 22rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  flex: 1;
}

.item_id {
  height: 80rpx;
  width: 100%;
  line-height: 80rpx;
  vertical-align: middle;
  color: #333;
}

.item_title {
  height: 80rpx;
  width: 100%;
  line-height: 80rpx;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  display: table-cell;
}

ListView 布局文件

list/index.wxml

<import src="../../comm/carTemp/index.wxml"/>
<view class="main">

  <block wx:for="{{dataList}}" wx:for-item="dataItem">
       <template is="carTemp" data="{{...dataItem}}"></template>
  </block>

</view>

list/index.js

Page({

  data: {
    dataList: [
      { id: 1, name: 'title1' },
      { id: 2, name: 'title2' },
      { id: 3, name: 'title3' },
      { id: 4, name: 'title431232133333333333aaa2zsssas' },
      { id: 5, name: 'title5' },
    ],
  },


})

注意： 引入 模板文件 的 （css 样式）

list/index.wxss

@import "../../comm/carTemp/index.wxss";