微信小程序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 处理 URL 的两个函数代码
Aug 13 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 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代码
2007/03/03 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
ubuntu上安装python的实例方法
2019/09/30 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
会计电算化专业自荐信
2014/03/15 职场文书
校长寄语大全
2014/04/09 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
公务员政审材料
2014/12/23 职场文书
社区元宵节活动总结
2015/02/06 职场文书
商务司机岗位职责
2015/04/10 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js