微信小程序-视图
数据绑定
<!--wxml--> <view> {{message}} </view>
// page.js Page({ data: { message: 'Hello MINA!' } })
列表渲染
<!--wxml--> <view wx:for="{{array}}"> {{item}} </view>
// page.js Page({ data: { array: [1, 2, 3, 4, 5] } })
条件渲染
<!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js Page({ data: { view: 'MINA' } })
模板
<!--wxml-->
<!---模板开始---> <template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template>
<!--模板结束-->
<!--调用模板 模板的name 在调用的时候使用 is 对应 data 中表示模板中显示的数据(obj类型) -->
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } })
事件
//绑定一个时间 点击时调用 add
<view bindtap="add"> {{count}} </view>
Page({ data: { count: 1 }, add: function(e) { this.setData({ count: this.data.count + 1 }) } })
微信小程序-视图的更多相关文章
- 微信小程序视图层介绍及用法
一. 视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 1.1. 数据绑定 1.1.1. 普通写法 <vi ...
- 微信小程序-视图容器组件
view 视图容器 例如: <view class="section"> <view class="section__title">fl ...
- 微信小程序-视图事件
事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 ...
- 微信小程序-视图数据绑定
数据绑定 在逻辑层设置数据例如: Page({ data: { message: 'Hello MINA!' } })//设置了一个属性,名称是message 值为Hello MINA! 在视图显示数 ...
- 微信小程序 - 视图层 | 基础语法
视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...
- 微信小程序-视图视图引用
引用 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的t ...
- 微信小程序-视图模板
定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段,如: <!-- index: int msg: string time: string --& ...
- 微信小程序-视图列表渲染
wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view ...
- 微信小程序-视图条件渲染
条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...
随机推荐
- BizTalk动手实验(十六)EDI-AS2解决文案开发配置
1 课程简介 通过本课程熟悉EDI.AS2解决文案的开发与配置,本动手实验步骤及内容采用微软官方SDK完成,学员在实验过程中结合官方教程来完成本实验 本实验基于BizTalk 2013(Windows ...
- BizTalk 开发系列(三十九) BizTalk Server 2009技术概览
BizTalk Server 2009已经发布一段时间了,之前Beta版发布的时候也写过一篇文章<BizTalk Server 2009 Beta初体验>, 当时比较了2006 R2与20 ...
- Android课程---Oracle VM VirtualBox出现不能为虚拟机打开一个新任务
因工作需要在Win7下增添了Win7虚拟系统,随着VirtualBox 4.326的版本更新,用户们也开始升级.一用户在升级后发现原来创建的虚拟机无法打开,提示信息为:不能为虚拟电脑win7打开一个新 ...
- Linux内存管理基本概念
1. 基本概念 1.1 地址 (1)逻辑地址:指由程序产生的与段相关的偏移地址部分.在C语言指针中,读取指针变量本身值(&操作),实际上这个值就是逻辑地址,它是相对于你当前进程数据段的地址.( ...
- jsp开发模式和web计算器案例
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- php SPL学习
数据结构 SplDoublyLinkedList - 该SplDoublyLinkedList类提供了一个双向链表的主要功能 SplStack - 该SplStack类提供了一种使用双向链表实现栈的主 ...
- 奥迪--A4L
-型号:A4L -价格:30-41W -动力:2T -变速箱:7挡双离合 -长宽高:4.81,1.84,1.43 -油箱:54L -发动机:EA888 -大灯:氙气(选装LED)
- eclipse创建web项目
总结为3步: 必备环境: Eclipse jee Tomcat 1.创建services 2.创建dynamic web project项目 3.WebContent路径下创建index.jsp 运行 ...
- delete all untracked files
git clean -f git clean -fdx f file d directory x .gitignore
- Nosql学习笔记
1.利用Query查询,Query操作只搜索主键属性值,并支持对键属性值使用部分比较运算符,以优化搜索过程. * 查询结果始终按范围键排序.如果范围键的数据类型是数字,则会按数字顺序返回结果:否则,会 ...