微信小程序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';

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。