微信小程序（WXML模板文件二）

最新推荐文章于 2023-04-04 12:02:09 发布

原创最新推荐文章于 2023-04-04 12:02:09 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

29 篇文章

订阅专栏

【本节大纲】
（1）循环指令key属性补充
（2）wx:if条件变异指令
（3）标签
（4）hidden隐藏元素
（5）模板
（6）引用
（7）共同属性

循环指令key属性补充

Vue和React框架用遍历指令时的key值不建议用index

key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以
如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值，不仅不会优化还会影响性能
index作为:key值，有可能导致第一次执行循环体初始化失败，正确的做法是尽量使用理想的 key 值，比如每项都有的唯一 id或者名字

<block wx:for="{{switchList}}" wx:key="name">
<view>{{item.name}} -- <switch></switch></view>
</block>
<button bindtap="add">添加</button>

view{
  font-size: 46rpx;
  color: #ff5857;
  font-weight: bold;
}

  /**
   * 页面的初始数据
   */
  data: {
    age: 18,
    switchList:[
      { name: "开关1", id: 1 }, { name: "开关2", id: 2 }, { name: "开关3", id: 3 }, { name: "开关4",id:4 }
    ]
  },
  // 添加switch按钮
add(){
  const newSwitch = [{
    name: "开关" + (this.data.switchList.length+1)
  }];
  this.setData({
    switchList:newSwitch.concat(this.data.switchList)
  })
},

在这里插入图片描述

WXML语法—条件渲染

wx:if数据：可以用 wx:elif 和 wx:else 实现多路分支

<view wx:if="{{age<18}}">未成年</view>
<view wx:elif="{{age == 18}}">刚成年</view>
<view wx:elif="{{age>18 && age<60}}">成年</view>
<view wx:elif="{{age>60}}">老年</view>
<view wx:else>人</view>

  data: {
    age: 18
  },

渲染结果：<view>刚成年</view>

< block >标签

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{age<18}}">
<view>未成年</view>
<view>你不可以进入会场</view>
</block>

data初始化数据：age: 12
渲染结果：<view>未成年</view> <view>你不可以进入会场</view>

注意
< block /> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

hidden隐藏元素

除了wx:if可以控制元素显隐外，hidden属性也可以控制显隐

<view hidden="{{hiddenValue}}">
<text>文本标签1</text>
<text>文本标签2</text>
</view>

data初始化数据中：hiddenValue:true,
在这里插入图片描述

注意局限性：hidden元素对块状布局才生效，对行内元素也生效，但不推荐使用。

wx:if vs hidden

wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染
wx:if是惰性的，切换开销大，但初始化开销小
hidden组件始终会被渲染，只是简单的控制wxss显示与隐藏
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

WXML语法—模板

WXML提供模板template，可以在模板中定义代码片段，然后在不同的地方调用。
例如：信息通报展示模板制作步骤

template.wxml定义模板并命名
例如在only.wxml中定义模板并命名

<template name="publicTemplate">
<view class="publicArea">
  <text>{{showInfo}}</text>
  <text>{{nowDate}}</text>
</view>
</template>

在其他页面通过import和include引入
例如在myself.wxml文件通过import引入

<import src="../myself/myself.wxml" />

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
使用 is 属性，声明模板，然后传入data

<template is="publicTemplate" data="{{...item}}"></template>

最终渲染结果

同理，在别的页面也可以调用模板，然后传入数据

WXML语法—引用

WXML 提供两种文件引用方式import和include

import
import 可以文件中使用目标文件定义的 template，正如之前案例所示。
include
include可以将整个代码引入，相当于是拷贝到 include 位置

WXML语法—共同属性

所有wxml 标签都支持的属性称之为共同属性

属性名	类型	描述	注解
id	String	组件的唯一标识	整个页面唯一
class	String	组件的样式类	在对应的WXSS中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上处罚的事件时，会发送给事件处理函数
bind/catch	EventHandler	组件的事件

WXML语法—自定义属性

获取自定义属性值

event.currentTarget.dataset.***
event.currentTarget代表的是注册了监听点击事件的组件

<button bindtap="prompt" data-info="{{info}}" data-id="{{dataId}}">按钮</button>

  data: {
    info: "自定义属性相关数据",
    dataId: "demo"
  },
  prompt(event){
    /* event.currentTarget代表的是注册了监听点击事件的组件 */
    console.log(event.currentTarget.dataset.info)
    console.log(event.currentTarget.dataset.id)
  },