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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃凉拌辣芒果

不断学习,不断进步,共勉~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值