微信小程序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之典型高阶函数应用介绍
Jan 10 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
微信小程序 网络通信实现详解
Jul 23 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/01/02 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
php异常处理捕获错误整理
2019/09/23 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python gevent协程切换实现详解
2020/09/14 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
Linux的主要特性
2014/10/06 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
共产党员公开承诺书
2014/03/25 职场文书
投资意向书范本
2014/04/01 职场文书
现役军人家属慰问信
2015/03/24 职场文书
起诉书格式范文
2015/05/20 职场文书
图书馆义工感想
2015/08/07 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技