当前位置：首页 > article >正文

【微信小程序_4_小程序view组件和swiper组件】

article 2025/1/26 5:51:58

摘要：本文介绍小程序组件相关知识。包括组件分类为 9 大类，重点阐述视图容器类组件，如 view 用于页面布局，scroll - view 用于滚动列表，Swiper 和 swiper - item 用于轮播图，并给出相关组件属性及对应 wxml 和 wxss 代码示例。

微信小程序_4_小程序view组件和swiper组件

一、小程序组件相关
1.组件分类
2.视图容器类组件
（1）view 组件
（2）scroll-view 组件
（3）swiper 和 swiper - item 组件
a.indicator-dots
b.indicator-color
c.indicator-active-color
d.autoplay
e.interval
f.circular

一、小程序组件相关

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;
}