【微信小程序】template模板使用详解
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
模板的作用域:
模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs />
模块。
定义模板
<template name='allgood-item'>
<image src='{{icon}}' class='all_item_image'/>
<view class='all_item_right'>
<text class='all_item_title'>{{title}}</text>
<view class='all_item_details'>
<view>
<text class='all_item_new'>{{newPrice}}</text>
<text class='all_item_old'>{{oldPrice}}</text>
</view>
<text class='all_item_buy'>立即购买</text>
</view>
</view>
</template>
使用模板
<import src='./allgood-item-template/allgood-item-template.wxml'/> <block wx:for='{{modelArray}}'>
<template is='allgood-item' data='{{...item}}' />
</block>
微信小程序结合使用ES6+的解构和属性延展,我们给template传递一批属性更为方便了。
定义模板样式
.all_item_image {
...
}
...
.all_item_new,.all_item_old,.all_item_buy{
...
}
引用模板样式
@import './allgood-item-template/allgood-item-template.wxss';
template进行绑定事件
<block wx:for='{{modelArray}}'>
<view class='all_item_view' bindtap='toDetails'>
<template is='allgood-item' data='{{...item}}' />
</view>
</block>
【微信小程序】template模板使用详解的更多相关文章
- 微信小程序 template模板使用
参考文章: 微信小程序-template模板使用
- 微信小程序template模板与component组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- 微信小程序 this和that详解及简单实例
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...
- 微信小程序获取用户手机号详解
最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...
- 【微信小程序】支付过程详解
一.介绍 今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html ...
- 微信小程序--问题汇总及详解之form表单
附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> ...
- 微信小程序支付之代码详解
微信小程序自带的一套规则,类似vue语法,但是好多功能都集成在api中,给了很多初学者轮子,所以首先要熟悉这些api,忘记可照官网继续开发 这里主要说下微信小程序的支付,原理类似上篇介绍的公众网页支付 ...
- 微信小程序项目wx-store代码详解
这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然 ...
- 转发:微信小程序-template模板使用
转载于CSDN--[向朔1992]处.(部分内容根据实际情况有所修改) 小程序实现主页面调用次级页面的wxml页面内容,如下图: 根据上图,我们可以将图片和图片信息作为一个goodsList.wx ...
- [转]微信小程序-template模板使用
本文转自:http://blog.csdn.net/u013778905/article/details/59646241 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一 ...
随机推荐
- 代码这样写更优雅,15篇 Python 技术热文
http://mp.weixin.qq.com/s?__biz=MzA4MjEyNTA5Mw==&mid=2652565527&idx=1&sn=840c1ce854afc29 ...
- zookeeper启动失败,但是状态显示已启动的原因
今天在起zookeeper集群的时候,其他两台机子都能起起来,只有这一台机子起不起来: 对比了 这个路径下的 文件后发现多了一个这个文件 根据名字推测应该是放进程id.突然明白这个应该是上次非正常退出 ...
- Wappalyzer(chrome网站分析插件)
Wappalyzer是一款功能强大的.且非常实用的chrome网站技术分析插件,通过该插件能够分析目标网站所采用的平台构架. 网站环境.服务器配置环境.JavaScript框架.编程语言等参数,使用时 ...
- JS-字符串截取方法slice、substring、substr的区别
一.使用 slice() 截取 1,函数说明 slice() 方法可通过指定的开始和结束位置,提取字符串的某个部分,并以新的字符串返回被提取的部分.语法如下: stringObject.slice(s ...
- JavaScript学习笔记-----NaN、isNan
NaN / Number.NaN 全局属性 NaN 的值表示不是一个数字(Not-A-Number), NaN 属性的初始值就是 NaN,和 Number.NaN 的值一样. 在现代浏览器中(ES ...
- ABP入门教程7 - 基础设施层更新数据库
点这里进入ABP入门教程目录 设置数据库 在基础设施层(即JD.CRS.EntityFrameworkCore)打开数据库环境设置 JD.CRS.EntityFrameworkCore/EntityF ...
- 剑指Offer-28.数组中出现次数超过一半的数字(C++/Java)
题目: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2.如 ...
- [HDU6288]Tree
题目 题解 首先读题就很成问题....英语咋办呐!!! 直接考虑有点复杂,直接分析每一条边能否被选入最终答案.对于这条边,看看他的\(size[v]\) 与 \(n-size[v]\) 是否都大于等于 ...
- Global Azure Bootcamp 2019 宁波站活动总结
4月27日,由微软MVP技术社区发起的Global Azure Bootcamp 2019盛会在全球80多个国家270个城市举办.本次活动由全国众多Azure专家及微软MVP技术社区成员,分别在北京. ...
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...