V2CE – 如何使用小程序视图容器组件

在上一篇文章中，我们介绍了小程序入门开发的基础步骤，并通过几个Hello Word例子，让大家体验了下小程序的组件及API使用，接下来的教程中，我们将教大家详细使用每个组件及API的使用。

在这篇教程中，我们将介绍小程序的视图容器组件以及小程序基础内容组件的使用。

视图容器组件

小程序的视图容器组件分为五个组件，分别为负责普通显示的view组件、负责可滚动视图区域scroll-viel组件，负责滑块视图容器swiper组件、可以触发移动的movable-area组件，已经可覆盖其他内容的cover-view组件。这篇文章中，我们将对这几个组件使用我们上一篇文章中创建的Hello World Demo进行演示及介绍。

为了教程演示方便，在开始之前，我们需要安装微信小程序官方分享的WeUI小程序视觉基础样式库，安装起来很简单，只需要点击这里下载weui.wxss小程序样式文件，然后将其复制到你小程序项目的lib文件夹即可，没有lib文件夹请自行创建。

1541386916372

之后，在你的页面wxss文件中引入weui.wxss就能直接使用这个样式库文件了。

Hello World – view

等上面文件准备就绪，我们就可以开始学习view组件的使用，首先，将原来项目中的index.wxss及index.wxml中的内容清除干净，同时删除index.js中的多余的函数，保留默认函数即可。接下来，将index.wxss中的文件替换为下面的内容。

@import "../../lib/weui.wxss";

.page-section{
  margin-bottom: 20rpx;
}
.flex-wrp {display: flex;}
.bc_green {background: yellow;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}

然后，再打开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="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>

保存，你将看到类似下面的样式。

1541387434659

有前端开发经验的同学应该能看懂，这里的写法和css样式很像似，指定相关的class，就能够实现不同的排序及样式。我们可以尝试更改flex-direction:column的值将其改为flex-direction:column-reverse，看看会发生什么？

1541387984257

原来的1、2、3顺序变更为3、2、1了，参考css文档，column-reverse的效果与 column 相同，但是以相反的顺序。果然，view组件是支持原生css样式的。同时，小程序官方也提供了一些view组件特有的属性，我们看看下表的内容，在这里，我们可以体验下hover-class组件。

属性名

类型

默认值

说明

hover-class

String

none

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

hover-stop-propagation

Boolean

false

指定是否阻止本节点的祖先节点出现点击态

hover-start-time

Number

50

按住后多久出现点击态，单位毫秒

hover-stay-time

Number

400

手指松开后点击态保留时间，单位毫秒

将index.wxml文件中的第4行代码<view class="flex-item bc_green">1</view>改为<view class="flex-item bc_green" hover-class="flex-item bc_blue">1</view>，然后将鼠标移动到左上角黄色框内1的位置，点击看看会发生什么。

1541388595334

原来，这个view组件中的hover-class属性能够修改当前view的样式，当你点击这个view，将会显示你在hover-class中定义的属性。同时，我们也可以通过hover-start-time和hover-stay-time设定按住显示时间和手松开后的保留时间。试试下面的代码吧~

<view class="flex-item bc_green" hover-class="flex-item bc_blue" hover-start-time="500" hover-stay-time='10000'>1</view>

Hello World – scroll-view

体验完view后，我们看看scroll-view组件，同样，我们先上代码。这里的代码大家可以对上一步骤的代码进行修改，也可以直接复制我提供的代码。我们先修改index.wxml

<view class="section__title">竖向滚动</view>
<scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  <view id="demo1" class="scroll-view-item bc_green"></view>
  <view id="demo2"  class="scroll-view-item bc_red"></view>
  <view id="demo3" class="scroll-view-item bc_blue"></view>
</scroll-view>
<view class="section__title">横向滚动</view>
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
  <view id="demo1" class="scroll-view-item_H bc_green"></view>
  <view id="demo2"  class="scroll-view-item_H bc_red"></view>
  <view id="demo3" class="scroll-view-item_H bc_blue"></view>
</scroll-view>

接下来修改index.wxss文件

@import "../../lib/weui.wxss";
.bc_green {
background: green;
}
.bc_red {
background: red;
}
.bc_blue {
background: blue;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

之后保存即可，我们开看看更改了那些内容，index.wxml文件中，我们，增加了scroll-view组件，并修改了class的属性。在index.wxss中，我们删掉了原有bc_green等文件的width、height属性。并新增了部分的页面属性。你会看到类似下面的样式。

1541401771692

现在，用鼠标尝试滚动页面中的色块，你将会看到滚动效果，scroll-view作用就是将你的view块滚动起来，这个快里面可以加任意内容，但是值得注意的是，请勿在 scroll-view 中使用 textarea、map、canvas、video 组件。不然用户使用起你的小程序时，体验将变的很差。scroll-view支持的属性较多，这里我只摘出较为重要的属性，具体属性请参考官方文档https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html。

属性名

类型

默认值

说明

scroll-x

Boolean

false

允许横向滚动

scroll-y

Boolean

false

允许纵向滚动

upper-threshold

Number

50

距顶部/左边多远时（单位px），触发 scrolltoupper 事件

lower-threshold

Number

50

距底部/右边多远时（单位px），触发 scrolltolower 事件

scroll-top

Number

设置竖向滚动条位置

scroll-left

Number

设置横向滚动条位置

scroll-into-view

String

值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

scroll-with-animation

Boolean

false

在设置滚动条位置时使用动画过渡

enable-back-to-top

Boolean

false

iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向

bindscrolltoupper

EventHandle

滚动到顶部/左边，会触发 scrolltoupper 事件

bindscrolltolower

EventHandle

滚动到底部/右边，会触发 scrolltolower 事件

bindscroll

EventHandle

滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

Hello World – swiper

除了刚才讲的scroll-view视图容器，官方还提供了另一种滑块容器组件swiper组件，swiper滑块更适合banner或幻灯片等应用的展示，其支持指示点、自动播放等功能，我们就来体验下吧，同样，修改index.wxml为下列内容。

<view class="page-body">
  <view class="page-section page-section-spacing swiper">
    <swiper indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item>
          <view class="swiper-item {{item}}"></view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_switch">
        <view class="weui-cell__bd">指示点</view>
        <view class="weui-cell__ft">
          <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
        </view>
      </view>
      <view class="weui-cell weui-cell_switch">
        <view class="weui-cell__bd">自动播放</view>
        <view class="weui-cell__ft">
          <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
        </view>
      </view>
    </view>
  </view>

  <view class="page-section page-section-spacing">
    <view class="page-section-title">
      <text>幻灯片切换时长(ms)</text>
      <text class="info">{{duration}}</text>
    </view>
    <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
    <view class="page-section-title">
      <text>自动播放间隔时长(ms)</text>
      <text class="info">{{interval}}</text>
    </view>
    <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
  </view>
</view>

然后，修改index.wxss为下面的内容。

@import "../../lib/weui.wxss";
.bc_green {background: green;}
.bc_red {background: red;}
.bc_blue {background: blue;}
button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;
}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}

因为我们要修改当前swiper组件的滑动速度，所以，使用index.js来做逻辑处理。在data:{}增加下面的内容。

    background: ['bc_green', 'bc_red', 'bc_blue'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500

然后在page({})增加下面的函数。

  onShareAppMessage: function () {
  },
  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }

最后执行，你将会看到类似下面的页面，尝试修改指示点、自动播放、幻灯片切换时长等按钮，你会看到上面的banner图自动进行切换。这里修改代码较多，我们在介绍逻辑之前先看看官方文档的属性说明吧。

属性名

类型

默认值

说明

indicator-dots

Boolean

false

是否显示面板指示点

indicator-color

Color

rgba(0, 0, 0, .3)

指示点颜色

indicator-active-color

Color

#000000

当前选中的指示点颜色

autoplay

Boolean

false

是否自动切换

current

Number

0

当前所在滑块的 index

current-item-id

String

“”

当前所在滑块的 item-id ，不能与 current 被同时指定

interval

Number

5000

自动切换时间间隔

duration

Number

500

滑动动画时长

circular

Boolean

false

是否采用衔接滑动

vertical

Boolean

false

滑动方向是否为纵向

previous-margin

String

“0px”

前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值

next-margin

String

“0px”

后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

display-multiple-items

Number

1

同时显示的滑块数量

skip-hidden-item-layout

Boolean

false

是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息

bindchange

EventHandle

current 改变时会触发 change 事件，event.detail = {current: current, source: source}

bindanimationfinish

EventHandle

动画结束时会触发 animationfinish 事件，event.detail 同上

参照的上面的表格我们来简单的介绍下代码，首先我们在view视图中，创建autoplay（自动播放）、interval（自动切换时长）、duration（动画时长）这三个属性，并将其设置为动态。然后在index.js中获取这几个属性的状态，返回当前状态，从而实现控制swiper的属性，关于如何获取前端的数值，我们将在后面的文章中讲解，大家不用着急搞懂，先明白swiper的使用即可。通过实验，我想大家应该很快就明白了swiper和scroll-view的区别，接下来，我们看看视图容器中的另一个组件。

Hello World – movable-view

movable-view也是可移动的视图容器，但是，它与swiper、scroll-view的区别在哪里呢？我们先设置demo，然后再看看区别。我们在index.js文件中，加入下面的函数

  tap: function (e) {
      this.setData({
        x: 30,
        y: 30
      });
    },

然后打开index.wxml填入下面的内容

<view class="section">
  <view class="section__title">movable-view区域小于movable-area</view>
  <movable-area style="height: 200px; width: 200px; background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>
  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
  </view>
</view>

尝试拖动蓝色方块，点击click me to move to (30px, 30px)按钮试试。

1541407033124

发现区别了吗？movable-view是基于像素事件的，可以精确的控制当前图标位置，在代码中，我们设置了两个区域，分别为movable-area和movable-view，movable-area为可移动区域（图中红色区域），movable-view就是我们设置的可移动组件（图中蓝色区域），movable-view必须在<movable-area>组件中，并且必须是直接子节点，否则不能移动。movable-area属性很简单，只有scale-area属性，该属性设置为当前movable-area是否支持双指缩放。movable-view可设置内容较多，可参考文档，我这里只摘出常用内容。

属性名

类型

默认值

说明

direction

String

none

movable-view的移动方向，属性值有all、vertical、horizontal、none

inertia

Boolean

false

movable-view是否带有惯性

out-of-bounds

Boolean

false

超过可移动区域后，movable-view是否还可以移动

x

Number / String

定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画

y

Number / String

定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画

damping

Number

20

阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快

friction

Number

2

摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值

disabled

Boolean

false

是否禁用

scale

Boolean

false

是否支持双指缩放，默认缩放手势生效区域是在movable-view内

scale-max

Number

10

定义缩放倍数最大值

scale-value

Number

1

定义缩放倍数，取值范围为 0.5 – 10

animation

Boolean

true

是否使用动画

我们在代码中已经实现了自动移动到x,y坐标，接下来我们可以设定其他参数，比如说只能垂直滑动，那么我们只需要把<movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">这行代码all值改为vertical即可，顺便，我想增加拖动惯性，只用增加inertia参数即可。

<movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="vertical" inertia="ture">

这时，你发现你的蓝色方块只能垂直拖动了，同时拖动的时候有明显的惯性。movable-view参数有很多，赶快都尝试下吧！

Hello World – cover-view

最后，我们来讲讲cover-view视图组件。cover-view是覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。同样，我们写出代码看看效果。首先修改index.wxml文件。

<view class="page-body">
    <view class="page-section page-section-gap">
      <map style="width: 100%; height: 300px;">
        <cover-view class="cover-view">
          <cover-view class="container">
            <cover-view class="flex-wrp" style="flex-direction:row;">
              <cover-view class="flex-item bc_green"></cover-view>
              <cover-view class="flex-item bc_red"></cover-view>
              <cover-view class="flex-item bc_blue"></cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
      </map>
    </view>
  </view>

接下来，修改index.wxss文件。

@import "../../lib/weui.wxss";
.bc_green {background: green;}
.bc_red {background: red;}
.bc_blue {background: blue;}

.flex-wrp{
  display:flex;
}

.flex-item{
  width: 200rpx;
  height: 300rpx;
  font-size: 26rpx;
}

如果配置正确，你将会看到类似下面的内容。

1541409047998

我们设置的组件浮在了地图的上方，这就是cover-view的作用，我们使用cover-view就可以给你的小程序某个组件或者view上设置logo。

基础内容组件

除了上文提到的五个view组件，小程序还支持了四个基础内容组件，分别是icon图标组件，text文本组件，rich-text富文本组件以及progress进度条组件。

Hello World – icon

icon组件，默认支持success, success_no_circle, info, warn, waiting, cancel, download, search, clear这几个属性的展示。同时也支持变换大小的size属性，及指定颜色是color属性。

属性名

类型

默认值

说明

type

String

icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

size

Number

23

icon的大小，单位px

color

Color

icon的颜色，同css的color

我们可以使用下面的代码来熟悉icon的使用，先修改index.wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>


<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

接下来，我们修改index.js属性。在page中插入如下代码。

  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }

之后，系统将为我们渲染出相应的icon内容，如图。

1541409823795

可见，使用icon组件还是很简单的，我们直接调用即可生效。

Hello World – text

text组件可能是我们最常用的一个功能了，当然最简单的用法是<text>我是一段文字</text>，官方为text组件也提供了相关属性。

属性名

类型

默认值

说明

selectable

Boolean

false

文本是否可选

space

String

false

显示连续空格

decode

Boolean

false

是否解码

我们可以设置文字是否可选可复制，显示连续空格内容，是否支持解码。我们尝试修改下代码看看效果。

<text selectable="ture" space="ensp" decode="ture">我是  一  段文&nbsp;字</text>

值得注意的是space的值不能乱填，具体如下。

值

说明

ensp

中文字符空格一半大小

emsp

中文字符空格大小

nbsp

根据字体设置的空格大小

当我们运行上述代码后，会发现当前文字可以选择复制了，系统自动解析了&nbsp;字符的内容。

1541410651650

Hello World – rich-text

当然，我们的text也能以富文本形式展现内容。我们就以渲染nodejs为例。首先在index.js中，写入下面的内容。

Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
})

我们在data文件中指定了nodes里面的内容。接下来我们撰写index.wxml文件的内容。

<rich-text nodes="{{nodes}}"></rich-text>

之后选择保存，看到我们设置的nodejs富文本已经正常显示。

1541411531681

关于详细的富文本节点内容，请参考官方文档。

Hello World – progress

最后，我们介绍下进度条组件。首先看看支持的属性。

属性名

类型

默认值

说明

percent

Float

无

百分比0~100

show-info

Boolean

false

在进度条右侧显示百分比

border-radius

Number / String

0

圆角大小，单位px或rpx，默认为px

font-size

Number / String

16

右侧百分比字体大小，单位px或rpx，默认为px

stroke-width

Number / String

6

进度条线的宽度，单位px或rpx，默认为px

color

Color

#09BB07

进度条颜色 （请使用 activeColor）

activeColor

Color

已选择的进度条的颜色

backgroundColor

Color

未选择的进度条的颜色

active

Boolean

false

进度条从左往右的动画

active-mode

String

backwards

backwards: 动画从头播；forwards：动画从上次结束点接着播

通过下列代码，可实现表中大部分功能。

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

1541411851408

这里内容为前端内容，想必大家经过上面组件使用，已经学会如何使用progress组件。

总结

微信官方支持的九个基础的视图容器组件和基础内容组件就在这里给大家介绍完毕了。通过这几个基础组件，你就可以为你的小程序搭建一个基础的框架。后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！

正文完
云上实践
2021-05-22