[小程序]页面的构建

一、视图容器组件

①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文件设置