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

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

虎丘网站建设公司创新互联建站,虎丘网站设计制作,有大型网站制作公司丰富经验。已为虎丘1000+提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的虎丘做网站的公司定做!

微信小程序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://bzwzjz.com/article/pcopdj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 重庆网站建设 成都网站建设 成都网站建设 四川成都网站制作 成都营销网站建设 手机网站建设 网站制作 手机网站建设 重庆网站设计 网站建设方案 高端网站建设 成都网站建设公司 响应式网站设计方案 泸州网站建设 成都网站建设流程 公司网站建设 达州网站设计 网站建设 定制网站设计 重庆网站制作 成都网站制作 成都网站建设