微信小程序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实现页面跳转的几种方式分享
Oct 26 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
vue router demo详解
Oct 13 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
vue中实现回车键登录功能
Feb 19 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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中使用XML
2006/10/09 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
浅谈PHP进程管理
2019/03/08 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现ssh批量登录并执行命令
2016/10/25 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
竞聘演讲稿
2014/04/24 职场文书
法人授权委托书
2014/09/16 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2015年暑假工作总结
2015/07/13 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书