mjz update
This commit is contained in:
@@ -8,6 +8,7 @@ article: false
|
||||
## 全屏限高轮播
|
||||
|
||||
1. 添加类名 `screen-swiper`,宽度为全屏,高度自定义
|
||||
|
||||
2. 请直接参考 `swiper` [官方文档](https://uniapp.dcloud.net.cn/component/swiper.html#),可以通过类名 `square-dot` 和 `round-dot` 定义小圆点样式
|
||||
|
||||
```vue
|
||||
@@ -54,7 +55,9 @@ article: false
|
||||
## 卡片式轮播
|
||||
|
||||
1. 在 `swiper` 标签上添加类名 `card-swiper`
|
||||
|
||||
2. 在 `swiper-item` 标签内的子元素上添加类名 `swiper-item`,
|
||||
|
||||
3. 示例中 `cardSwiper` 函数的主要作用是切换类名 `cur`,`cur` 的作用是实现轮播图片中间大,两边小的效果,就是 `transform的scale()`
|
||||
|
||||
```vue
|
||||
@@ -195,4 +198,16 @@ cardSwiper(e) {
|
||||
z-index: var(--index);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
```
|
||||
|
||||
## 轮播图相关class
|
||||
|
||||
|class| 说明| 可选值|
|
||||
|--| --| --|
|
||||
|screen-swiper| 全屏限高轮播| ——|
|
||||
|square-dot| 方形指示点| ——|
|
||||
|round-dot| 圆形指示点| ——|
|
||||
|card-swiper| 卡片式轮播| ——|
|
||||
|swiper-item| 滑动切换区域(具体看示例) |——|
|
||||
|tower-swiper| 堆叠式轮播 |——|
|
||||
|tower-item| 堆叠式轮播子元素| ——|
|
||||
Reference in New Issue
Block a user