微信小程序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 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
javascript 写类方式之二
Jul 05 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
javascript用函数实现对象的方法
May 14 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
微信小程序实现拍照和相册选取图片
May 09 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
js日历功能对象
2012/01/12 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
javascript闭包入门示例
2014/04/30 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue.js中created方法作用
2018/03/30 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
python win32 简单操作方法
2017/05/25 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
浅谈Python中的私有变量
2018/02/28 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
会计与审计专业大专生求职信
2013/10/03 职场文书
医药专业推荐信
2013/11/15 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
学习教师法的心得体会
2014/09/03 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS