微信小程序中template模板是什么-创新互联
这篇文章将为大家详细讲解有关微信小程序中template模板是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站设计、成都网站建设、王益网络推广、成都小程序开发、王益网络营销、王益企业策划、王益品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联为所有大学生创业者提供王益建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com微信小程序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://scyanting.com/article/deisjg.html