微信小程序template模板使用

前言

微信小程序中提供了template使用，即相同的板块可以进行代码互用，如下方的效果图，就可以用template。

效果图

一、模板定义

模板最重要的是模板的名称，即"" 
以下是实例模板代码

1. <template name="postItem">
2. <view class='post-container'>
3. <view class='post-author-date'>
4. <image class='post-author' src='{{avatar}}'></image>
5. <text class='post-date'>{{date}}</text>
6. </view>
7. <text class='post-title'>{{title}}</text>
8. <image class='post-image' src='{{imgSrc}}'></image>
9. <text class='post-content'>{{content}}</text>
10. <view class='post-like'>
11. <image class='post-like-image' src='/images/icon/chat.png'></image>
12. <text class='post-link-text'>{{collection}}</text>
13. <image class='post-like-image' src='/images/icon/view.png'></image>
14. <text class='post-link-text'>{{reading}}</text>
15. </view>
16. </view>
17. </template>

wxss文件

1. .post-container {
2. display: flex;
3. flex-direction: column;
4. margin-top: 20rpx;
5. margin-bottom: 40rpx;
6. background-color: white;
7. border-bottom: 1px solid #ededed;
8. border-top: 1px solid #ededed;
9. padding-bottom: 5px;
10. }
11.  
12. .post-author-date {
13. margin: 10rpx 0 20rpx 10rpx;
14. }
15.  
16. .post-author {
17. width: 60rpx;
18. height: 60rpx;
19. vertical-align: middle;
20. }
21.  
22. .post-date {
23. margin-left: 20rpx;
24. vertical-align: middle;
25. margin-bottom: 5px;
26. font-size: 26rpx;
27. }
28.  
29. .post-title {
30. font-size: 34rpx;
31. font-weight: 600;
32. color: #333;
33. margin-bottom: 10px;
34. margin-left: 10px;
35. margin-right: 10px;
36. }
37.  
38. .post-image {
39. margin-left: 16px;
40. width: 100%;
41. height: 340rpx;
42. margin: auto 0;
43. margin-bottom: 15rpx;
44. }
45.  
46. .post-content {
47. color: #666;
48. font-size: 28rpx;
49. margin-bottom: 20rpx;
50. margin-left: 20rpx;
51. margin-right: 20rpx;
52. letter-spacing: 2rpx;
53. line-height: 40rpx;
54. }
55.  
56. .post-like {
57. font-size: 13px;
58. flex-direction: row;
59. line-height: 16px;
60. margin-left: 16px;
61. color: gray;
62. }
63.  
64. .post-like-image {
65. height: 16px;
66. width: 16px;
67. margin-right: 8px;
68. vertical-align: middle;
69. }
70.  
71. .post-link-text {
72. vertical-align: middle;
73. margin-right: 20px;
74. }

二、模板使用

引入模板文件  使用模板文件 用is 使用 模板定义时的名称  data里面是循环里面里面的数据 用“...”表示的话，就可以把item里面的数据全部平铺出来，这样在template里面就不用写“item.xx”了，直接写item里面的属性就可以了  要使用template的程序wxml文件

1. <import src="post-item/post-item-template.wxml" />
2. <view>
3. <block wx:for="{{postList}}" wx:for-item="item">
4. <template is="postItem" data="{{...item}}" />
5. </block>
6. </view>

wxss 文件

1. @import 'post-item/post-item-template.wxss';