微信小程序基础 - 组件1. 小程序中组件的分类小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的

1. 小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类,分别是:

视图容器
基础内容
表单组件
导航组件
媒体组件
map 地图组件
canvas 画布组件
开放能力
无障碍访问

2. 常用的视图容器类组件

view

普通视图区域
类似于 HTML 中的 div , 是一个块级元素
常用来实现页面的布局效果

scroll-view

可滚动的视图区域
常用来实现滚动列表效果

swiper 和 swiper-item

轮播图容器组件和轮播图 item 组件

3. view组件的基本使用

实现如图的flex横向布局效果:

图片.png

代码附上：

flex.wxml

<!-- 实现flex横向布局的效果 -->

<view class="container1">

  <view>A</view>

  <view>B</view>

  <view>C</view>

</view>

flex.wxss

/* pages/flex/flex.wxss */

.container1 view {

  width: 100px;

  height: 100px;

  text-align: center;

  line-height: 100px;

}

.container1 view:nth-child(1) {

  background-color: red;

}

.container1 view:nth-child(2) {

  background-color: aqua;

}

.container1 view:nth-child(3) {

  background-color: palegoldenrod;

}

.container1 {

  /* 设置浮动 */

  display: flex;   

  justify-content: space-around;

}

4. scroll-view组件的基本使用

实现如图的纵向滚动效果:

图片.png

代码附上：

scroll.wxml

<!--pages/scroll/scroll.wxml-->

<!-- scroll-y 属性：允许纵向滚动 -->

<!-- scroll-x 属性：允许横向滚动 -->

<!-- 注意：使用竖向滚动时，必须给 scroll-view 一个固定高度 -->

<scroll-view class="container1" scroll-y>

  <view>A</view>

  <view>B</view>

  <view>C</view>

</scroll-view>

scroll.wxss

/* pages/scroll/scroll.wxss */

.container1 view {

  width: 100px;

  height: 100px;

  text-align: center;

  line-height: 100px;

}

.container1 view:nth-child(1) {

  background-color: red;

}

.container1 view:nth-child(2) {

  background-color: aqua;

}

.container1 view:nth-child(3) {

  background-color: palegoldenrod;

}

.container1 {

  /* 设置外边框 */

  border: 1px solid fuchsia;

  /* 给 scroll-view 固定高度 */

  height: 120px;

  width: 100px;

}

5. swiper 和 swiper-item 组件的基本使用

实现如图的轮播图效果:

图片.png

代码附上：

swiper.wxml

<!--pages/swiper/swiper.wxml-->

<!-- indicator-dots  是否显示面板指示点 -->

<!-- indicator-color  指示点颜色 -->

<!-- indicator-active-color  当前选中的指示点颜色 -->

<!-- autoplay 是否自动切换 -->

<!-- interval  自动切换时间间隔 -->

<!-- circular  是否采用衔接滑动 -->

\


<!-- 轮播图区域 -->

<!-- indicator-dots 属性：显示面板指示点 -->

<swiper class="swiper-container" indicator-color="white" indicator-active-color="gray" indicator-dots autoplay interval="2000" circular>

  <!-- 第一项 -->

  <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.wxss

/* pages/swiper/swiper.wxss */

.swiper-container {

  /* 轮播图容器的高度 */

  height: 150px;

}

.item {

  height: 100%;

  line-height: 150px;

  text-align: center;

}

swiper-item:nth-child(1) .item{

  background-color: rgb(61, 223, 83);

}

swiper-item:nth-child(2) .item{

  background-color: goldenrod;

}

swiper-item:nth-child(3) .item{

  background-color: darkmagenta;

}