189 8069 5689

微信小程序中怎么使用template模板-创新互联

小编给大家分享一下微信小程序中怎么使用template模板,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、网站空间、营销软件、网站建设、华坪网站维护、网站推广。

微信小程序template模板使用

前言

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

微信小程序中怎么使用template模板

效果图

一、模板定义

模板最重要的是模板的名称,即""


以下是实例模板代码


 
  
   
   {{date}}
  
  {{title}}
  
  {{content}}
  
   
   {{collection}}
   
   {{reading}}
  
 

wxss文件

 .post-container {
 display: flex;
 flex-direction: column;
 margin-top: 20rpx;
 margin-bottom: 40rpx;
 background-color: white;
 border-bottom: 1px solid #ededed;
 border-top: 1px solid #ededed;
 padding-bottom: 5px;
}
.post-author-date {
 margin: 10rpx 0 20rpx 10rpx;
}
.post-author {
 width: 60rpx;
 height: 60rpx;
 vertical-align: middle;
}
.post-date {
 margin-left: 20rpx;
 vertical-align: middle;
 margin-bottom: 5px;
 font-size: 26rpx;
}
.post-title {
 font-size: 34rpx;
 font-weight: 600;
 color: #333;
 margin-bottom: 10px;
 margin-left: 10px;
 margin-right: 10px;
}
.post-image {
 margin-left: 16px;
 width: 100%;
 height: 340rpx;
 margin: auto 0;
 margin-bottom: 15rpx;
}
.post-content {
 color: #666;
 font-size: 28rpx;
 margin-bottom: 20rpx;
 margin-left: 20rpx;
 margin-right: 20rpx;
 letter-spacing: 2rpx;
 line-height: 40rpx;
}
.post-like {
 font-size: 13px;
 flex-direction: row;
 line-height: 16px;
 margin-left: 16px;
 color: gray;
}
.post-like-image {
 height: 16px;
 width: 16px;
 margin-right: 8px;
 vertical-align: middle;
}
.post-link-text {
 vertical-align: middle;
 margin-right: 20px;
}

二、模板使用

引入模板文件


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



 
   
 

wxss 文件

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

以上是“微信小程序中怎么使用template模板”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章题目:微信小程序中怎么使用template模板-创新互联
文章源于:http://jkwzsj.com/article/ddeccs.html

其他资讯