有关建设工程的强制性标准与抗震_中国最大的广告公司排名列表_怎样才能在百度上面做广告宣传_廊坊关键词优化排名

摘要：本文介绍小程序组件相关知识。包括组件分类为 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;
}