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

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

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

视图容器组件

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

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

之后，在你的页面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>

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

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

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

将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的位置，点击看看会发生什么。

原来，这个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属性。并新增了部分的页面属性。你会看到类似下面的样式。

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

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图自动进行切换。这里修改代码较多，我们在介绍逻辑之前先看看官方文档的属性说明吧。

参照的上面的表格我们来简单的介绍下代码，首先我们在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)按钮试试。

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

我们在代码中已经实现了自动移动到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;
}

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

我们设置的组件浮在了地图的上方，这就是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属性。

我们可以使用下面的代码来熟悉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内容，如图。

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

Hello World – text

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

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

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

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

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

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 World!'
      }]
    }]
  },
})

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

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

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

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

Hello World – progress

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

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

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

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

总结

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