摘要:本文介绍小程序组件相关知识。包括组件分类为 9 大类,重点阐述视图容器类组件,如 view 用于页面布局,scroll - view 用于滚动列表,Swiper 和 swiper - item 用于轮播图,并给出相关组件属性及对应 wxml 和 wxss 代码示例。
一、小程序组件相关
1.组件分类
小程序组件由宿主环境提供,官方分为 9 大类,包括:
- 视图容器
- 基础内容
- 表单组件
- 导航组件
- 媒体组件
- map 地图组件
- canvas 画布组件
- 开放能力
- 无障碍访问
2.视图容器类组件
(1)view 组件
普通视图区域,类似 HTML 中的 div,是块级元素,常用于页面布局。
(2)scroll-view 组件
可滚动的视图区域,用于实现滚动列表效果。
.wxml相关代码:
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
.wxss相关代码:
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightcoral;
}
.container1 view:nth-child(3){
background-color: lightblue;
}
.container1 {
border: 4px solid blue;
width: 100px;
height: 180px;
}
(3)swiper 和 swiper - item 组件
轮播图容器组件和轮播图 item 组件。
a.indicator-dots
- 类型:boolean
- 默认值:false
- 说明:用于控制是否显示面板指示点。
b.indicator-color
- 类型:color
- 默认值:rgba(0, 0, 0,.3)
- 说明:设置指示点的颜色。
c.indicator-active-color
- 类型:color
- 默认值:#000000
- 说明:指定当前选中的指示点颜色。
d.autoplay
- 类型:boolean
- 默认值:false
- 说明:决定是否自动切换轮播图。
e.interval
- 类型:number
- 默认值:5000
- 说明:设置自动切换的时间间隔,单位为毫秒。
f.circular
- 类型:boolean
- 默认值:false
- 说明:用于控制是否采用衔接滑动,即轮播到最后一张后是否自动衔接第一张继续滑动。
.wxml相关代码:
<!--轮播图-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="black" autoplay interval="3000" circular>
<!-- indicator-dots 展示小圆点-->
<!-- 未激活显示白色indicator-color="white" -->
<!-- 已激活的显示黑色 indicator-active-color="black" -->
<!-- autoplay自动切换 -->
<!-- interval="3000" 切换间隔时间毫秒 3秒 -->
<!-- circular 采用衔接滑动 -->
<!-- 第1个轮播图 -->
<swiper-item>
<view class="item">轮播图片A</view>
</swiper-item>
<!-- 第2个轮播图 -->
<swiper-item>
<view class="item">轮播图片B</view>
</swiper-item>
<!-- 第3个轮播图 -->
<swiper-item>
<view class="item">轮播图片C</view>
</swiper-item>
</swiper>
.wxss相关代码:
.swiper-container{
/*轮播图容器的高度*/
height: 120px;
}
.item{
/*轮播图容器内子容器的高度*/
height: 100%;
/* 每行文本所占的垂直空间 */
line-height: 120px;
/* 文本居中 */
text-align: center;
}
swiper-item:nth-child(1){
background-color: rgb(222, 144, 238);
}
swiper-item:nth-child(2){
background-color: lightskyblue;
}
swiper-item:nth-child(3){
background-color: lightcoral;
}