微信小程序swiper和swiper-item组件的基本使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序swiper和swiper-item组件的基本使用相关的知识，希望对你有一定的参考价值。
(swiper和swiper-item)
实现轮播图效果
==list.wxml==
<!--轮播图的结构-->
<swiper class="swiper-container">
<!--第一个轮播图-->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!--第二个轮播图-->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!--第三个轮播图-->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
==list.wxss==
/* 轮播图样式 */
.swiper-container
height: 150px;
.item
height: 100%;
line-height: 150px;
text-align: center;
swiper-item:nth-child(1) .item
background-color: lightgreen;
swiper-item:nth-child(2) .item
background-color: lightskyblue;
swiper-item:nth-child(3) .item
background-color: lightpink;
swiper组件的常用属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | boolean | false | 是否显示面板提示点 |
| indictor-color | color | rgba(0,0,0,3) | 指示点颜色 |
| indictor-active-color | color | #000000 | 当前选择的指示点颜色 |
| autoplay | boolean | false | 是否自动切换 |
| interval | number | 5000 | 自动切换时间间隔 |
| circular | boolean | false | 是否采用衔接滑动 |
✅显示指示点颜色
✅设置指示点颜色
✅设置当前选择的指示点颜色
✅设置1秒自动切换
✅设置衔接滑动
结束语
以上是关于微信小程序swiper和swiper-item组件的基本使用的主要内容，如果未能解决你的问题，请参考以下文章