136 lines
3.1 KiB
Markdown
136 lines
3.1 KiB
Markdown
# Banner 组件使用说明
|
||
|
||
这是一个通用的轮播图(Banner)组件，可以在应用的任何页面轻松集成。
|
||
|
||
## 特点
|
||
|
||
- 支持配置不同类型的banner（通过type_id参数）
|
||
- 自动从后端接口获取数据
|
||
- 支持可选的指示器显示
|
||
- 处理点击事件跳转到对应页面
|
||
- 自动轮播图片
|
||
- **支持通过插槽在轮播图上方添加自定义内容**
|
||
- **支持自定义轮播图高度**
|
||
|
||
## 使用方法
|
||
|
||
### 1. 引入组件
|
||
|
||
项目已经在 `pages.json` 的 `easycom` 中配置了自动引入规则，因此您无需手动导入组件。
|
||
|
||
### 2. 在页面中使用
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<!-- 基本用法 -->
|
||
<banner :type-id="1"></banner>
|
||
|
||
<!-- 显示指示器 -->
|
||
<banner :type-id="2" :show-indicator="true"></banner>
|
||
|
||
<!-- 使用插槽添加自定义内容 -->
|
||
<banner :type-id="3">
|
||
<view class="custom-content">
|
||
<text class="title">热门活动</text>
|
||
</view>
|
||
</banner>
|
||
|
||
<!-- 自定义高度 -->
|
||
<banner :type-id="4" :height="400"></banner>
|
||
|
||
<!-- 组合使用多个属性 -->
|
||
<banner :type-id="5" :height="500" :show-indicator="true">
|
||
<view class="custom-title">限时活动</view>
|
||
</banner>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
.custom-content {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 10rpx 0;
|
||
}
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 3. 参数说明
|
||
|
||
| 参数名 | 类型 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| typeId | Number/String | 1 | banner类型ID，对应接口的type_id参数 |
|
||
| showIndicator | Boolean | false | 是否显示轮播图指示器 |
|
||
| height | Number/String | 300 | 轮播图高度，单位rpx |
|
||
|
||
### 4. 插槽
|
||
|
||
组件提供了一个默认插槽，可以用来在轮播图上方添加自定义内容。插槽内容会被定位在轮播图的顶部，并且会保持在最上层。
|
||
|
||
示例：
|
||
```vue
|
||
<banner :type-id="1">
|
||
<!-- 这里的内容会显示在轮播图上方 -->
|
||
<view class="banner-title">热门推荐</view>
|
||
</banner>
|
||
```
|
||
|
||
### 5. 接口数据
|
||
|
||
组件通过调用 `api/getAdvert` 接口获取数据，传入 `type_id` 参数。
|
||
|
||
接口返回数据格式示例：
|
||
```json
|
||
{
|
||
"status": 1,
|
||
"msg": "请求成功",
|
||
"data": [
|
||
{
|
||
"imgurl": "https://example.com/image1.png",
|
||
"ttype": 1,
|
||
"coupon_id": 123,
|
||
"goods_id": 0
|
||
},
|
||
{
|
||
"imgurl": "https://example.com/image2.png",
|
||
"ttype": 2,
|
||
"coupon_id": 0,
|
||
"goods_id": 456
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 6. 点击跳转逻辑
|
||
|
||
根据返回数据中的 `ttype` 和 `goods_id` 属性，组件会自动处理点击跳转：
|
||
|
||
- ttype=1: 跳转到"领券中心"
|
||
- ttype=2: 跳转到"一番赏"详情页
|
||
- ttype=3: 跳转到"无限赏"详情页
|
||
- ttype=4: 跳转到"连击赏"页面
|
||
|
||
## 示例
|
||
|
||
### 首页banner
|
||
```vue
|
||
<banner :type-id="1"></banner>
|
||
```
|
||
|
||
### 商城页banner带标题和自定义高度
|
||
```vue
|
||
<banner :type-id="3" :show-indicator="true" :height="400">
|
||
<view class="mall-title">精选商品</view>
|
||
</banner>
|
||
```
|
||
|
||
### 活动页banner
|
||
```vue
|
||
<banner :type-id="5" :height="350"></banner>
|
||
``` |