微信小程序-视图
数据绑定
<!--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} ...
随机推荐
- 解决安装sql server 需要重启问题
解决办法: 一.在SQL服务器的安装盘中找到MSDE这个目录,并且点击setup.exe安装它. 二.安装完毕后,重启系统WINDOWSXP,这下就可以看到SQL服务的图标出现了. 三.再直接安装根目 ...
- js中把数据库时间转为正常值
function timeFormatter(value) { var da = new Date(parseInt(value.replace("/Date(", "& ...
- NEC学习 ---- 模块 -多行式面包屑导航
如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...
- 浏览器中Javascript单线程分析
线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...
- css页面布局基础
1.盒模型属性包括boder.margin.padding.width.height,这些属性可以使用快捷方式表示,顺序为上右下左,值之间用空格隔开. 2.使用clip和overflow属性时,pos ...
- 检测PC端和移动端的方法总结(转)
正在苦逼的实习中,昨天公司让做一个页面,涉及到检测终端的问题,如果是手机设备,就跳转到指定的网页上,以前写响应式布局只要用@media screen来实现布局的差异化适应,但是现在不仅仅是布局,还要针 ...
- 通过 Chrome Workspace 调试本地项目(修改样式时及时保存)
打开 DevTools 开发者工具[F12]中的 Sources 面板,在面板左侧右键选择「Add folder to workspace」,选择添加的文件夹. 添加好后,右键一个文件,选择「Map ...
- js检测浏览器是否支持某属性
以检测浏览器是否支持 input 标签的 required 属性为例: var isSupport = 'required' in document.createElement('input');
- Extjs 中column的renderer使用方法
renderer: function(value, cellmeta, record, rowIndex, columnIndex, store) { if (record.get('productT ...
- IntelliJ IDEA Community Edition 14.1.4下使用 Apache-Subversion搭建代码管理环境
当前我的idea 版本是14.1.4. 1,)SVN Server下载与安装(https://www.visualsvn.com/server/): 因为我开发机是x64的,所以我优先下载 x64的 ...