小程序模板网

微信小程序template模板使用

微信小程序中提供了template使用,即相同的板块可以进行代码互用,如下方的效果图,就可以用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';


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18349.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询