微信小程序之指令与模板( 三)

一、指令

wx:for 循环

//index.wxml
<view>
     <view wx:for="{{arr}}" wx:for-item="item" wx:for-index="index" wx:key="index">{{item}}</view>
</view>

注意：
小程序中循环的默认循环体为item ，当然也可以自定义循环体 wx:for-item="新的循环体" 同时也可以定义索引 wx:for-index="index" 还有为了避免渲染节点时错误可以用wx:key="唯一标识符" 控制

//index.js
Page({
     data:{
         arr:["vue","react","node"]
     }
})

wx:if/wx:elif/wx:else

<view>
     <view wx:if="{{count>4}}">1</view>
     <view wx:elif="{{count>2}}">2</view>
     <view wx:else>3</view>
</view>

block wx:if

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

<view>
    <block wx:if="{{true}}">
          <view>显示</view>
    </block>
</view>

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

hidden

<view hidden="{{true}}">
   aaa
</view>

wx:if vs hidden

wx:if :组件会根据判断条件来控制一个元素是否渲染。（条件为false，则不会渲染这个元素。）

hidden :组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

二、模板

什么是模板？

微信小程序的模版主要是用于公共界面管理，比如弹窗或公共页面都可以用模版定义。
<1>、模板创建
首先在pages文件夹中新建一个template文件夹，文件夹中新建一个template.wxml文件

<template name="custom">
       <view>我是定义的模板</view>
</tempalte>

<2>、模板的使用
然后在我们要使用的wxml加载

//list.wxml
//引入模板
<import src="../template/tempalte"/>
<view>
     <template is="custom"></template>
</view>

注意：
（1）list.wxml中template 标签的is属性与template.wxml中template 标签的name属性值相同
（2）list.wxml文件中要通过import标签声明需要使用的模板文件
<3>、模板数据的传递
有时候模版需要外面给他传递数据显示，这时先定义参数

//template.wxml
<template name="msgItem">
  <view>
    <text class="info">{{list}</text>
  </view>
</template>

//list.wxml
<import src="../template/tempalte"/>
<view>
     <template is="custom" data="{{list}}"></template>
</view>

如果感觉有帮助，请留下一个宝贵的赞，或者给小编一个赞赏！！！