微信小程序template模板的分析（微信小程序模板开发）

微信小程序template模板的分析（微信小程序模板开发）

这篇文章主要介绍了微信小程序template模板使用的相关资料,希望通过本文能帮助到大家，让大家理解掌握这样的功能，需要的朋友可以参考下

微信小程序template模板使用

前言

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

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

效果图

一、模板定义

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

以下是实例模板代码

登录后复制

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';登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

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