跟我来学小程序（二）组件简介

大家好，我是一个爱举铁的程序员Shr。

 

本篇文章介绍小程序提供的各种组件。

 

源码地址：

https://github.com/ShrMus/wechat_xcx/tree/master/demo_20180604

 

组件是视图层的基本组成单元。

 

 

组件的属性类型有Boolean，Number，String，Array，Object，EventHandler（事件处理函数名），Any（任意属性）

 

所有组件共同的属性类型有id，class，style，hidden，data-*，bind*/catch*

 

基础组件分为以下七大类：

 

 

一、视图容器

1.1 view

相当于HTML中的<div>标签。

 

<!-- index.wxml -->
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

 

 

/* index.wxss */
.bc_green{
  background-color: green;
  width: 150rpx;
  height: 150rpx;
}
.bc_red{
  background-color: red;
  width: 150rpx;
  height: 150rpx;
}
.bc_blue{
  background-color: blue;
  width: 150rpx;
  height: 150rpx;
}
.flex-wrp {display: flex;}

 

页面结果：

 

1.2 scroll-view

可滚动视图区域。

 

<!-- index.wxml -->
<view class="section">
  <view class="section__title">vertical scroll 竖向滚动</view>
  <scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll 横向滚动</view>
  <scroll-view class="scroll-view_H" scroll-x style="width:200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>

 

 

//index.js
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red'
  },
  upper: function (e) {
    console.log(e)
  },
  lower: function (e) {
    console.log(e)
  },
  scroll: function (e) {
    console.log(e)
  }
})

 

 

/* index.wxss */
.scroll-view_H {
  display: flex;
  white-space: nowrap;
}
.scroll-view-item_H{
  display:inline-block;
}

 

使用竖向滚动时，需要给<scroll-view/>一个固定高度。

不要在 scroll-view 中使用 textarea、map、canvas、video 组件。

scroll-into-view 的优先级高于 scroll-top。

在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh。

若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部。

 

页面结果：

​

1.3 swiper

滑动视图容器。代码不贴了，可以到文章开头提供的源码地址下载源码。

页面效果：

 

二、基础内容

2.1 icon

图标。

 

2.2 text

文本。

 

2.3 进度条

 

三、表单组件

表单组件中大部分和HTML5中的差不多，这里不再复述了，大家可以参考文档。

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

 

四、导航

在HTML中用<a>标签点击跳转页面，小程序中使用<navigator>，具体使用情况请参考文档。

 

五、媒体组件

包括音频<audio>，图片<image>，视频<video>，系统相机<camera>，实时音视频播放<live-player>，实时音视频录制<live-pusher>

 

六、地图

<map>，具体请看文档，这里不再贴代码了。

 

七、画布

<canvas>

 

总结

没有一个个去介绍这些组件了，其实到使用的时候看文档就好了。