可参考微信开发者文档wxml模板
目录:
listItem.wxml中定义模板
<template name="listItem"> //name属性为模板的名字
<view class="commonItem">
<image src="{{img}}"></image>
<view class="itemRight">
<view class="itemTitle">{{title}}</view>
<view class="itemFooter">
<text>{{name}}</text>
<text>{{date}}</text>
</view>
</view>
</view>
</template>
listItem.wxss
.commonItem{
width: 646rpx;
height: 160rpx;
background:rgba(244,244,244,1);
box-shadow:0rpx 1rpx 7rpx 0rpx rgba(139,139,139,0.36);
border-radius:0rpx 30rpx 30rpx 0rpx;
margin:0 auto;
display: flex;
align-items: center;
padding: 25rpx 30rpx;
box-sizing: border-box;
margin-top: 35rpx;
}
.commonItem image{
width: 130rpx;
height: 108rpx;
margin-right: 30rpx;
}
.itemRight{
/* flex: 100%; */ ----------在弹性盒子中慎用flex:100%;或者width:100%;
width: 415rpx;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.itemTitle{
font-size:30rpx;
word-break: keep-all;
word-wrap: break-word;
white-space:pre-line;
}
.itemFooter{
font-size:24rpx;
}
在相对应的组件中(.wxml)使用模板:
<import src="../../../../template/listItem/listItem.wxml" /> -------------------用import方式(写相对路径)引入模板(include引入方式不适合这里)
<template is="listItem" data="{{...data}}"/> -------------------使用...可在模板中少写item,is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板
在相对应的组件中(.wxss)使用模板:
@import "../../../../template/listItem/listItem.wxss";