找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索本站精品资源

搜索

首页 › 教程频道› 小程序开发 › 查看内容

微信小程序template模板使用

作者：模板之家 2018-1-2 09:18 8563人关注

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

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

 
 
 

前言

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

效果图

 

一、模板定义

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

 

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

						

							wxss文件

						

							 

						

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

    


    路过    
    		



    雷人    
    		



    握手    
    		



    鲜花    
    		



    鸡蛋    
    		

    

    



 
            
    

            
     
            
    
                  原作者: 模板之家 
                  来自: 网络收集 
                   
                   
                              
    
                        
          
          
    
  
      
  
  	
    

    上一篇：VIDE支持微信和支付宝小程序开发
    下一篇：微信小程序实战--Jgank小程序开发（一）
    
  
        
      
      
    
    
       
       
      

    
  	
    
       
    全部回复(0)
    
            
    
  
     
    
     
     
    
      
        
    
      
  
    

    

        
    
    
    
     
    

    

    


    

    
                
    
           
    
    
    
    
    
    

   
    
         

    
     
        
  
     
  
    
    
     
      
     
    
    
  
    




     
  
     

    

 

 

     




    
    

    



    
  
    
  
    
    
    
      
    Copyright © Comsenz Inc. Powered by Discuz!X3.5 


 蜀ICP备12013697号 
    
    
    
    
    
       
     微信：xu08290201   QQ：75283535