微信小程序template模板实例详解


Posted in Javascript onOctober 27, 2017

微信小程序template模板使用

前言

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

微信小程序template模板实例详解

效果图

一、模板定义

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

以下是实例模板代码

<template name="postItem">
 <view class='post-container'>
  <view class='post-author-date'>
   <image class='post-author' src='{{avatar}}'></image>
   <text class='post-date'>{{date}}</text>
  </view>
  <text class='post-title'>{{title}}</text>
  <image class='post-image' src='{{imgSrc}}'></image>
  <text class='post-content'>{{content}}</text>
  <view class='post-like'>
   <image class='post-like-image' src='/images/icon/chat.png'></image>
   <text class='post-link-text'>{{collection}}</text>
   <image class='post-like-image' src='/images/icon/view.png'></image>
   <text class='post-link-text'>{{reading}}</text>
  </view>
 </view>
</template>

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文件

<import src="post-item/post-item-template.wxml" />
<view>
 <block wx:for="{{postList}}" wx:for-item="item">
   <template is="postItem" data="{{...item}}" />
 </block>
</view>

wxss 文件

@import 'post-item/post-item-template.wxss';

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

Javascript 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
微信小程序 上传头像的实例详解
Oct 27 #Javascript
探讨Vue.js的组件和模板
Oct 27 #Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 #Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 #Javascript
Express系列之multer上传的使用
Oct 27 #Javascript
You might like
windows xp下安装pear
2006/12/02 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php横向重复区域显示二法
2008/09/25 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
详解python时间模块中的datetime模块
2016/01/13 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python实现爬山算法的思路详解
2019/04/09 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
《苏珊的帽子》教学反思
2014/04/07 职场文书
实习单位评语
2014/04/26 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
庆六一活动总结
2014/08/29 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle