微信小程序组件之视图容器组件

WXML

• WXML的全称是WeiXin Markup Language（微信标记语言），类似于HTML也是一种使用<标签>和</标签>来构建页面结构的语言
• <标签>和</标签>来构建页面结构小程序组件；
• 小程序组件是微信小程序视图层的基本组成单元。

微信小程序组件通用属性

七类

• id:类型String,组件的唯一标识
• class:类型String,组件样式类
• style:类型String,组件内联样式
• hidden:布尔类型，控制组件的显示和隐藏，组件默认显示
• data-*:可以为各种数据类型，当组件触发事件时，会附带将该属性和值发送给对应的事件处理函数
• bind*/catch*:组件的事件，绑定/捕获组件事件

微信小程序组件类别

1. 优先重点掌握组件

• 视图容器：主要用于规划布局页面内容
• 基础内容：用于显示图标、文字等常用基础内容
• 表单：用于制作表单

2. 次优先掌握组件

• 导航：用于跳转指定页面
• 媒体：用于显示图片、音频、视频等多媒体内容
• 地图：用于显示地图效果
• 画布：用于绘制图画内容

3. 选择性掌握组件

• 开放能力

微信小程序组件——视图容器

视图容器组件主要包含5种

组件名称	解释
view	静态视图容器,<view></view>标签表示一个容器区域,该容器本身没有大小和颜色，需要开发者自己进行样式设置。
scroll-view	可滚动视图容器
swiper	滑块视图容器
movable-view	可移动视图容器
cover-view	可覆盖在原生组件上的文本视图容器

swiper滑块视图容器

• 作用:制作幻灯片切换播放效果
• 其中只可放置swiper-item组件，否则会导致未定义的行为
• <swiper>标签必须配合<swiper-item>组件一起使用，该组件才是用于切换的具体内容
• <swiper-item>中可以包含文本或图片，其宽高默认为100%。
• swiper属性
  • current：number类型，默认0，为当前所在滑块的 index

<swiper indicator-dots autoplay></swiper>
<swiper indicator-dots="true" autoplay="true"></swiper>
实现一个带有指示点自动播放的滑块视图容器,属性具体含义看文档
上述代码是不够的，标签必须配合组件一起使用，该组件才是用于切换的具体内容。

scroll-view可滚动视图容器

scroll-view表示可滚动视图区域，包裹住要滚动的组件容器

横向滚动

• 属性：scroll-x
• 核心思想：让scroll-view容器里面的子元素显示在一行
• 容器子元素显一行方法：

1. flex布局：flex容器内的子元素块状特性消失默认显示在一行且默认不换行在一行显示，父元素设置"display:flex;flex-direction:row;"
2. 网页布局：放置子元素的父元素不自动换行+子元素行内块

方式1.
采用flex布局父元素设置display:flex;flex-direction:row;

//wxss
.xx{display:flex;}

//内联样式
<scroll-view scroll-x>
  <view style="dispaly:flex;flex-direction:row">//放置子元素容器
     <block wx:for="{
    
    {items}}">//多节点渲染
       <view>
         <image src="{
    
    {item.url}"></image>
       </view>
     <block>
  </view>
</scroll-view>

方式2：
父元素设置 white-space: nowrap; //不换行
子元素设置display: inline-block;

<scroll-view style="white-space;nowrap;display:flex"

竖向滚动

使用竖向滚动时，需要给一个固定高度，并且通过 WXSS 设置 height。

基础组件

组件名称	解释
icon	图标组件
text	文本组件
rich-text	富文本组件
progress	进度条组件

图标icon

为图标组件，开发者可以自定义其类型、大小和颜色。该组件对应的属性如表所示。

属性名	类型	默认值	说明
type	String	none	图标类型，看文档
size	Number	23	图标大小，单位：px
color	Color	none	图标颜色，例如color=“red”

例如，声明一个红色、40像素大小的警告图标

`<icon type="warn" size="40" color="red"></icon>`

如果有多个图标需要批量生成，可以事先在对应的JS文件中用data记录数据，然后在WXML文件中配合使用标签。

//依次生成红、黄、蓝色的信息图标
<view>
 <block wx:for="{
    
    {iconColor}}">
   <icon type="info" color="{
    
    {item}}"/>
 </block>
</view>

//JS
Page({
data:{iconColor:['red','yellow','blue']}
})

表单组件

表单组件主要包含10种

组件名称	解释
button	按钮组件
checkbox	复选框组件
form	表单组件
input	输入框组件
picker	从底部弹起的滚动选择器
picker-view	嵌入页面的滚动选择器
radio	单选框组件
slider	滑动条组件
switch	开关选择器
textarea	文本框组件

输入框input

1. type属性有效值如下：

• text：文本输入键盘
• number：数字输入键盘
• idcard：身份证输入键盘
• digit：带小数点的数字键盘

<input type="text"></input>
<input type="number"></input>
<input type="idcard"></input>
<input type="digit"></input>

2. confirm-type属性有效值如下：

• send：右下角显示“发送”按钮
• search：右下角显示“搜索”按钮
• next：右下角显示“下一个”按钮
• go：右下角显示“前往”按钮
• done：右下角显示“完成”按钮

<input confirm-type="send"/>
<input confirm-type="search"/>
<input confirm-type="next"/>
<input confirm-type="go"/>
<input confirm-type="done"/>

3. 输入框如果要获取输入的值，需要在input上面绑定事件，在事件里面传入e ，e.detail.value就是输入的值

//wxml
<input bindtap="getInPut"></input>

//js
 getInPut:function(event){
    console.log(event.detail.value)
  },

标签label

<label>用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，点击时会触发对应的控件。该组件对应的属性如表所示。

导航组件

导航组件<navigator>用于点击跳转页面链接，其对应的属性如表所示。

属性名	类型	默认值	说明
target	String		在哪个目标上发生跳转，默认当前小程序
url	String		当前小程序内的跳转链接地址
open-type	String	navigate	跳转方式，共有5种方式

• 其中open-type属性对应的5种取值如表所示

属性值	说明
navigate	默认值，表示跳转新页面打开新地址内容（等同于wx.navigateTo或wx.navigateTpMiniProgram的功能）
redirect	重定向，表示在当前页面重新打开新地址内容（等同于wx.redirectTo功能）
switchTab	切换Tab面板，表示跳转指定Tab页面重新打开新地址内容（等同于wx.switchTab的功能）
reLaunch	切换Tab面板，表示跳转指定Tab页面重新打开新地址内容（等同于wx.switchTab的功能）
navigateBack	返回上一页（等同于wx.navigateBack的功能）

<navigator url="../new/new">
   <button type="primary">跳转到新页面打开新内容</button>
</navigator>
//上述代码表示在导航组件<navigator>中内嵌按钮组件<button>来实现跳转功能。当前<navigator>组件并未声明open-type属性，因此表示默认情况，即跳转新页面打开new.wxml。

• 如果需要传递数据给新页面，组件的url属性值可以使用如下格式：
  • <navigator url="跳转的新页面地址?参数1=值1&参数2=值2&…参数N=值N">
  • 其中参数名称可以由开发者自定义，参数个数为一个至若干个均可，多个参数之间使用&符号隔开。

<navigator url="../new/new?date=20180803">
   <button type="primary">跳转到新页面打开新内容</button>
</navigator>
//上述代码表示打开新页面的同时也传递了date=20180803这条数据给新页面使用

//在新页面JS文件的onLoad函数中可以获取到该参数，代码如下：
Page({
  onLoad: function (options) {
      console.log(options.date);//将在控制台打印输出20180803
  }
})

媒体组件

图片image

• 是图片组件，可以用于显示本地或网络图片，其默认宽度为300px、高度为225px
• 组件的mode 属性用于控制图片的裁剪、缩放，根据填入不同的有效值会形成 13 种模式：4 种缩放模式和9 种裁剪模式。具体情况看文档