概览:
基本功能
我们一般用到的就是:页面布局,引用数据
引用数据
一般引用的数据是js中声明的data块的数据
引用方式是通过使用 “{{…}}”
比如:
列表渲染(wx:for)
一般的控件渲染就不说了,这里说列表渲染主要是在控件中用到了for循环
wx:key与wx:key="*this"
参考
一般的,wx:key是跟着wx:for的,值一般是item的唯一标识,一般这个属性是item中唯一的且不会改变的字符串或者数字
wx:key="*this"也就是在item自己就是字符串和数字的时候使用,表示用自己来当这个唯一标识
使用wx:key和不使用wx:key的区别可以看下博客,简单来说,就是:
- 使用了wx:key的时候,当列表发生改变的时候,老的item不会重绘,保留老item的内容和状态
- 不使用wx:key的时候,当列表发生改变的时候,所有列表重绘,老item的状态不会保留
- 最明显的表现应用就是在item中进行了状态切换的时候
复杂列表(block配合wx:for)
再命名(wx:for-index和wx:for-item)
比如:
wx:for-index表示用idx命名当前角标
wx:for-item表示用itemName来命名当前的item
不声明的话,默认item的引用就是item
条件渲染(wx:if)
只会展示符合条件的View,比如上面的例子中,只会展示第三个View
复杂布局(block配合wx:if)
参考上面的
隐藏和显示(hidden配合wx:if)
比如:
模板(template)
这个模板是针对组件的重用的
模板的声明
定义一个wxml文件,作为公用的wxml,内容标签是template,特点是有一个name属性
模板的引用
在需要引用模板的页面,也就是page.wxml引入模板文件,引用方式是import
然后在填充模板的地方使用template标签,使用is指定模板的名称,data传递数据
举例
我们先看一下数据:
模板的声明:
在页面,也就是page.wxml中使用import引入模板文件,然后在填充控件的地方:
is指定了模板的名称
data指定也传递的data中的数据,注意表示方式
多模板选择
比如:
|
请发表评论