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

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

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

一、小程序组件相关

1.组件分类

小程序组件由宿主环境提供,官方分为 9 大类,包括:

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

2.视图容器类组件

(1)view 组件

普通视图区域,类似 HTML 中的 div,是块级元素,常用于页面布局。

(2)scroll-view 组件

可滚动的视图区域,用于实现滚动列表效果。

.wxml相关代码:

javascript 复制代码
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.wxss相关代码:

javascript 复制代码
.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相关代码:

javascript 复制代码
<!--轮播图-->
<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相关代码:

javascript 复制代码
.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;
}
相关推荐
拼图2091 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg6682 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通2 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
「、皓子~3 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
nbsaas-boot3 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟3 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45803 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游3 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
说私域3 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的抖音渠道力拓展与多渠道利润增长研究
人工智能·小程序·开源
MonkeyKing_sunyuhua5 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序