@gm-mobile/swiper 3.12.12-beta.0 → 3.12.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +117 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# @gm-mobile/swiper
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
轮播图组件包 - 基于 Swiper.js 封装的移动端轮播组件，提供图片轮播、分类轮播和图片预览功能。
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @gm-mobile/swiper
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
### peerDependencies
|
|
13
|
+
|
|
14
|
+
```json
|
|
15
|
+
{
|
|
16
|
+
"react": "^16.13.1",
|
|
17
|
+
"react-dom": "^16.13.1",
|
|
18
|
+
"swiper": "^5.3.8"
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## 使用
|
|
23
|
+
|
|
24
|
+
### 快速开始
|
|
25
|
+
|
|
26
|
+
```jsx
|
|
27
|
+
import { SwiperImg } from '@gm-mobile/swiper'
|
|
28
|
+
|
|
29
|
+
const data = [
|
|
30
|
+
{ img: 'https://example.com/banner1.png' },
|
|
31
|
+
{ img: 'https://example.com/banner2.png' },
|
|
32
|
+
]
|
|
33
|
+
|
|
34
|
+
<SwiperImg data={data} />
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## API
|
|
38
|
+
|
|
39
|
+
### 导出列表
|
|
40
|
+
|
|
41
|
+
| 导出项 | 类型 | 说明 |
|
|
42
|
+
|--------|------|------|
|
|
43
|
+
| `SwiperImg` | 组件 | 图片轮播组件 |
|
|
44
|
+
| `SwiperCategory` | 组件 | 分类轮播组件 |
|
|
45
|
+
| `PreviewImage` | 组件 | 图片预览组件（支持静态方法） |
|
|
46
|
+
|
|
47
|
+
### SwiperImg Props
|
|
48
|
+
|
|
49
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
50
|
+
|------|------|------|--------|------|
|
|
51
|
+
| data | 轮播数据，`[{ img, onClick? }]` | `array` | - | 是 |
|
|
52
|
+
| options | Swiper 配置项 | `SwiperOptions` | - | 否 |
|
|
53
|
+
|
|
54
|
+
### SwiperCategory Props
|
|
55
|
+
|
|
56
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
57
|
+
|------|------|------|--------|------|
|
|
58
|
+
| options | Swiper 配置项 | `SwiperOptions` | - | 否 |
|
|
59
|
+
|
|
60
|
+
### PreviewImage Props
|
|
61
|
+
|
|
62
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
63
|
+
|------|------|------|--------|------|
|
|
64
|
+
| images | 图片数组 `[{ img, onClick? }]` | `array` | - | 是 |
|
|
65
|
+
| onHide | 关闭预览回调 | `() => void` | - | 否 |
|
|
66
|
+
| defaultIndex | 默认预览的图片下标 | `number` | - | 否 |
|
|
67
|
+
|
|
68
|
+
### PreviewImage 静态方法
|
|
69
|
+
|
|
70
|
+
| 方法 | 说明 | 参数 |
|
|
71
|
+
|------|------|------|
|
|
72
|
+
| `PreviewImage.render(options)` | 打开图片预览 | `PreviewImageProps` |
|
|
73
|
+
| `PreviewImage.hide()` | 关闭图片预览 | - |
|
|
74
|
+
|
|
75
|
+
## 示例
|
|
76
|
+
|
|
77
|
+
### 图片轮播
|
|
78
|
+
|
|
79
|
+
```jsx
|
|
80
|
+
import { SwiperImg } from '@gm-mobile/swiper'
|
|
81
|
+
|
|
82
|
+
const data = [
|
|
83
|
+
{ img: 'https://example.com/1.png' },
|
|
84
|
+
{ img: 'https://example.com/2.png' },
|
|
85
|
+
]
|
|
86
|
+
|
|
87
|
+
const App = () => {
|
|
88
|
+
return <SwiperImg data={data} options={{ autoplay: true }} />
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### 图片预览
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
import { PreviewImage } from '@gm-mobile/swiper'
|
|
96
|
+
|
|
97
|
+
const images = [
|
|
98
|
+
{ img: 'https://example.com/1.png' },
|
|
99
|
+
{ img: 'https://example.com/2.png' },
|
|
100
|
+
]
|
|
101
|
+
|
|
102
|
+
const App = () => {
|
|
103
|
+
return (
|
|
104
|
+
<div>
|
|
105
|
+
<button onClick={() => PreviewImage.render({ images })}>预览图片</button>
|
|
106
|
+
</div>
|
|
107
|
+
)
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## 注意事项
|
|
112
|
+
- 依赖 `swiper@^5.3.8`，请确保安装了正确版本
|
|
113
|
+
- `SwiperImg` 的 `options` 支持所有 Swiper.js 原生配置
|
|
114
|
+
- 组件会自动引入 `swiper/css/swiper.css` 样式文件
|
|
115
|
+
|
|
116
|
+
## 相关包
|
|
117
|
+
- [@gm-mobile/react](../react) - 主组件库
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gm-mobile/swiper",
|
|
3
|
-
"version": "3.12.
|
|
3
|
+
"version": "3.12.13",
|
|
4
4
|
"description": "> TODO: description",
|
|
5
5
|
"author": "liyatang <liyatang@qq.com>",
|
|
6
6
|
"homepage": "https://github.com/gmfe/gm-mobile#readme",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"url": "https://github.com/gmfe/gm-mobile/issues"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@gm-mobile/react": "^3.12.
|
|
24
|
+
"@gm-mobile/react": "^3.12.13"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "^16.13.1",
|
|
28
28
|
"react-dom": "^16.13.1",
|
|
29
29
|
"swiper": "^5.3.8"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "f1807b01b33bb8ee331b6c713d52d85fda524bf7"
|
|
32
32
|
}
|