一、运行效果
- 轮播图区域与九宫格区域
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8c6e0350756b74051f9cb79df5e85944.gif#pic_center)
二、知识储备
(一)swiper与swiper-item组件
1、swiper组件
(1)功能描述
- 滑块试图容器。其中只可放置swipe-item组件,否则会导致未定义的行为。
(2)属性说明
属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
indicator-dots |
boolean |
false |
否 |
是否显示面板指示点 |
1.0.0 |
indicator |
color |
rgba(0,0,0,3) |
否 |
指示点颜色 |
1.1.0 |
indicator-active-color |
color |
#000000 |
否 |
当前选中的指示点颜色 |
1.1.0 |
autoplay |
boolean |
false |
否 |
是否自动切换 |
1.0.0 |
current number |
当前所在滑块的index,默认为0 |
|
|
|
1.0.0 |
interval |
number |
500 |
否 |
自动切换时间间隔 |
1.0.0 |
circular |
boolean |
false |
否 |
是否采用衔接滑动 |
1.0.0 |
2、swiper-item组件
(1)功能描述
- 仅可放置在swiper组件中,宽高自动设置为100%。
(2)属性说明
属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
item-id |
string |
|
否 |
该swiper-item的标识符 |
1.9.0 |
skip-hidden-item-layout |
boolean |
false |
否 |
是否跳过未显示的滑块布局,设为true可优化复杂情况下的滑动性能,但丢失隐藏状态滑块的布局信息 |
1.9.0 |
3、基本语法
- swiper组件通过
<swiper>
标签定义,swiper-item通过<swiper-item>
标签定义。
`
<swiper>
<swiper-item>1</swiper-item>
<swiper-item>2</swiper-item>
<swiper-item>3</swiper-item>
</swiper>
- swiper组件为外层容器,内层有3个swiper-item组件,表示当前滑块视图内容一共有3项。滑块视图内容在初始状态下只显示第1项,向左滑动显示第2项,再向右滑动可以返回第1项。
4、案例演示
<swiper class="swiper-container" current="2" indicator-dots="true" indicator-color="yellow" indicator-active-color="red" autoplay="true" interval="3000" circular="true">