微信小程序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 相关文章推荐
解密效果
Jun 23 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
Node登录权限验证token验证实现的方法示例
May 25 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
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
PHP生成树的方法
2015/07/28 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
PyTorch中permute的用法详解
2019/12/30 Python
postman和python mock测试过程图解
2020/02/22 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
大专应届生个人简历的自我评价
2013/10/15 职场文书
简短大学毕业感言
2014/01/18 职场文书
高一地理教学反思
2014/01/18 职场文书
食品安全工作方案
2014/05/07 职场文书
学校与家长安全责任书
2014/07/23 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
早安问候语大全
2015/11/10 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP