yfs/components/banner

Banner 组件使用说明

这是一个通用的轮播图(Banner)组件，可以在应用的任何页面轻松集成。

特点

• 支持配置不同类型的banner（通过type_id参数）
• 自动从后端接口获取数据
• 支持可选的指示器显示
• 处理点击事件跳转到对应页面
• 自动轮播图片
• 支持通过插槽在轮播图上方添加自定义内容
• 支持自定义轮播图高度

使用方法

1. 引入组件

项目已经在 pages.json 的 easycom 中配置了自动引入规则，因此您无需手动导入组件。

2. 在页面中使用

<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. 插槽

组件提供了一个默认插槽，可以用来在轮播图上方添加自定义内容。插槽内容会被定位在轮播图的顶部，并且会保持在最上层。

示例：

<banner :type-id="1">
  <!-- 这里的内容会显示在轮播图上方 -->
  <view class="banner-title">热门推荐</view>
</banner>

5. 接口数据

组件通过调用 api/getAdvert 接口获取数据，传入 type_id 参数。

接口返回数据格式示例：

{
  "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

<banner :type-id="1"></banner>

商城页banner带标题和自定义高度

<banner :type-id="3" :show-indicator="true" :height="400">
  <view class="mall-title">精选商品</view>
</banner>

活动页banner

<banner :type-id="5" :height="350"></banner>