小编给大家分享一下微信小程序如何实现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模板”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!