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模板渲染逻辑,可以直接留言
具体用法详情查看小程序文档
,,后面会添加使用例子