template模板渲染demo
wxml页面
<view class="btmcon">
<text class="btmtitle">学情分析</text>
<view id="btn-body" >
<!-- 学情报告分享模板开始indexs -->
<view class="haschild-body" wx:for="{{array}}" wx:key="id" wx:for-index="indexs" wx:for-item="itemName" bindtap="switch" data-id="{{itemName.dataTime}}">
<view class="text">
<text >{{itemName.time}}</text>
<text style="font-size:46rpx;">/{{itemName.day}}</text>
</view>
<view class="right-con">
<view class="btmtitle">学情分析报告</view>
<view class="fontsize subjectNum">共<text>{{itemName.tallSubject}}</text>学科</view>
<view class="fontsize subjectNames"><text style="margin-right:8rpx" wx:for='{{itemName.subjectName}}' >{{item}}</text></view>
</view>
</view>
<!-- 学情报告分享模板结束 -->
<!-- 没有数据显示 -->
<view class="noData" wx:if="{{condition}}">
<image src="/image/noData.png"></image>
<text>暂无数据</text>
</view>
</view> </view> wxss样式
.btmcon{
padding: 0rpx 30rpx 60rpx;
}
.btmtitle{
color: #E54B5D;
font-weight: bolder;
font-size: 40rpx;
letter-spacing: 5rpx;
}
#btn-body{
margin-top: 20rpx;
/* background: #fff; */
min-height: 200rpx;
}
.haschild-body{
background-color: #fff;
min-height: 100rpx;
margin-bottom: 10rpx;
display: flex;
flex: 1;
justify-content:left;
padding: 20rpx;
}
.haschild-body .text{
width: 130rpx;
height: 130rpx;
display: inline-block;
background: #9CBBFF;
text-align: center;
line-height: 130rpx;
color: #fff;
font-weight: bold;
/* font-size: 46rpx; */
font-size: 36rpx;
margin-right: 20rpx;
}
.fontsize{
font-size: 28rpx;
}
.subjectNum{
margin: 6rpx 0;
}
.right-con{
width: calc( 100% - 150rpx );
}
.subjectNames{
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
下面是arry数据
page({
data:{
array: [
{tallSubject: 3, subjectName: ['语文','数学','英语'], time: "08", day: "15", dataTime: "2019/08/15"},
{tallSubject: 3, subjectName: ['语文','数学','英语'], time: "08", day: "16", dataTime: "2019/08/16"},
{tallSubject: 3, subjectName: ['物理','化学','历史'], time: "08", day: "17", dataTime: "2019/08/17"},
{tallSubject: 3, subjectName: ['历史','数学','政治','语文'], time: "08", day: "18", dataTime: "2019/08/18"}
],
},
})
效果图：
为了便于初学者理解，写的template示例比较简单；更复杂的template模板渲染逻辑，可以直接留言
具体用法详情查看小程序文档
，，后面会添加使用例子