这是我参与8月更文挑战的第8天，活动详情查看：更文挑战
滑动组件
scroll-view
这是一个滑动组件
属性： scroll-x scroll-y 决定滑动方向
scroll-into-view 决定子组件显示位置 值是子组件的id
swiper
轮播图组件 swiper 等价于ul
属性：
indicator-dots： 小圆点是否显示
indicator-color: 非选中状态时小圆点的颜色
indicator-active-color： 选中状态时 小圆点的颜色
autoplay: 自动轮播
interval：轮播间隔
子组件： swiper-item 等价于li
举例：
<!--pages/swiper/swiper.wxml-->
<swiper indicator-dots indicator-active-color='orange' indicator-color='black' autoplay interval='3000'>
<swiper-item>
<image src="https://www.baidu.com/img/bd_logo1.png?where=super"></image>
</swiper-item>
</swiper>
微信指令
wx:for
在插值的时候，如果是普通的字段，值是字符串、布尔值、数字等数据时，可以直接插入。
但是如果值是数组中的成员。需要一个一个的填写，但是如果数组的长度不定。将会很麻烦。此时我们可以使用微信提供的指令解决。
简单来说，wx:for就是一个循环插值语法。
规则： wx:for="{{被循环的内容}}"
在wx:for所在的组件内 可以使用{{index}} 表示成员的索引
在wx:for所在的组件内 可以使用{{item}} 表示成员本身
使用方式:
JS文件中的数据:
data: {
arr: "abcdefghijkl".split("")
}
WXML文件中的指令使用:
<view wx:for="{{arr}}">{{index}} {{item}}</view>
控制台可以查看显示的内容。
此时，渲染完毕，但是控制台中有一个警告。
这是因为，微信要监听每一个值的状态，所以给每一个值都绑定了wx:key。
所以我们要指定该值：
<view wx:key="{{this}}" wx:for="{{arr}}">{{index}} {{item}}</view>
wx:for-index和wx:for-item
单层指令已经讲解完毕，但是多层该怎么办？
我们可以使用 wx:for-index="XXX" 将默认的index修改为自定义的名称
我们可以使用wx:for-item="YYY" 将默认的item修改为自定义的名称
注：此时一旦修改完毕，默认的index和item将不能再被使用
wx:if
该指令用于控制某个组件的显隐
使用方式:
<!--pages/if/if.wxml-->
<text wx:if="{{buer}}">pages/if/if.wxml</text>
<text>hahahahhaa</text>
JS文件的数据:
data: {
buer: false
}
渲染结果: 因为buer是false 所以因为if指令的原因，导致组件没有被渲染
模板
在微信中，有两种模板。
template组件
定义模板要通过template组件，并给name属性值
<!-- 通过template组件定义模板 -->
<template name="form">
<form>
<view>
<input type="text"></input>
</view>
</form>
</template>
<view>1</view>
此时渲染结果是：
我们发现，form表单并没有出现。
这是因为此时，仅仅定义了模板，还没有使用。
使用模板要通过template组件，并给is属性值
使用方式：
<view>1</view>
<template is="form"></template>
此时，就可以输出了
WXML模板
WXML文件本身就是模板
一个template文件夹中，有hahaha.wxml 有template.wxml
其中我们hahaha.wxml是模板文件。
hahaha.wxml:
<view>哈哈哈</view>
在template.wxml中使用:
<include src="./hahaha.wxml"></include>
此时渲染：
include组件
作用：将外部的WXML文件中的内容引入进来。
使用方式:
<include src="./hahaha.wxml"></include>
import组件
作用: 将外部WXML文件中的模板引入进来。
使用方式:
<import src="./tmp.wxml"></import>
此时，tmp.wxml文件中 通过template定义的模板就可以在这里使用了。
