[小程序]页面的构建

一、视图容器组件

        ①View

        视图区域组件，类似于HTML中的div，可以用来按块实现页面布局效果，具体实例如下：

<view class="dock">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

.dock view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.dock view:nth-child(1){
  background-color: lightblue;
}
.dock view:nth-child(2){
  background-color: lightcoral;
}
.dock view:nth-child(3){
  background-color: lightpink;
}

.dock{
  display: flex;
  justify-content: space-around;
}

        ②scroll-view

        可滚动视图区域，用来实现滚动列表效果，这里以纵向滚动为例

         首先需要在上面的代码基础上更改控件类型，同时设置滚动方向为y

<scroll-view class="dock" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

        同时还需要在样式中指定高度（小于内容组件的高度之和），否则自适应会无法实现滚动效果

.dock{
  border: 1px solid red;
  height: 130px;
  width: 100px;
}

        ③swiper和swiper-item

        轮播图组件，实现item轮播效果

        首先需要放置父容器swiper，然后使用swiper-item放置内容。

<swiper class="dock" indicator-dots>
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

        需要注意的是，swiper-item中最好再放一个view组件用来进行精细排布 

.dock{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: lightpink;
}
swiper-item:nth-child(2) .item{
  background-color: blue;
}
swiper-item:nth-child(3) .item{
  background-color: lightpink;
}

        这里展示一些swiper常见的属性以供参考：

indicator-dots	是否显示指示点
indicator-color	指示点的颜色
indicator-active-color	当前选中的指示点颜色
autoplay	是否自动滚动
interval	自动滚动的时间间隔
circular	是否使用滑动动画

二、基础内容组件

        ①text

        基础文本组件，类似于HTML的sapn标签，同时也可以是设置selectable来使得元素可以被长按选中(小程序中唯一的方法)

<view>
  你可以选中这段文字:
  <text selectable>1234567890</text>
</view>

        ②rich-text

        富文本组件，支持将HTML渲染为WXML结构

<view>
  <rich-text nodes="<h1>标题</h1>"></rich-text>
</view>

 三、交互组件

        ①button

        按钮组件，可以通过open-type属性调用微信提供的服务（转发、获取用户权限/信息）

        还可以通过type调整按钮的类型↑

  <button type="default">默认按钮</button>
  <button type="primary">主色调按钮</button>
  <button type="warn">警告按钮</button>

         还可以通过size设置小尺寸按钮↓

<button type="default" size="mini">默认按钮</button>

         还可以通过plain属性设置镂空按钮↓

<button type="default" plain>默认按钮</button>

 

        ②image

        图片组件，默认宽300px，高240px

<image src="/src/images/hello.png"></image>

        同时可以通过调整mode属性来设置图片的裁剪和缩放模式

scaleToFill	不保持长宽比，直接充满Image容器
aspectFit	保持长宽比自适应填充(保证长边)
aspectFill	保持长宽比，截取缩放(保证短边)
widthFix	宽度不变，高度自适应（保持长宽比）
heightFix	高度不变，宽度自适应（保持长宽比）

        边框通过css文件设置

.img{
  border: 1px solid red;
}

        ③navigator

        页面导航组件，类似HTML的a组件