轮播图 - mp-banner | ifanrx 工具库

常规商务项目的轮播图需求基本一致，包括了轮播图的优先级、轮播图类型（图片、gif、视频）、轮播图跳转类型（小程序内页面、其他小程序、webview）等，故整理一套较为通用的方案来覆盖轮播图的使用场景

mp-banner 一般与 dashboard 的 banner-edit/banner-list（TODO: 后续补充跳转链接）搭配使用，由 dashboard 创建/更新轮播图，mp-banner 负责客户端的渲染

使用方法

基础用法

vue

<script setup>
import io from '@/io'

const {
  data,
  isFetching: isFetchingBanner,
  isFetched: isFetchedBanner,
} = io.useQuery(() =>
  io.banner.find({
    orderBy: '-priority,-created_at',
    query: io.query.compare('published', '=', true),
  })
)
</script>

<template>
  <mp-banner
    autoplay
    circular
    :data="data"
    height="100vw"
    :interval="4000"
    width="100vw"
  />
</template>

使用自定义插槽

mp-banner 支持多种插槽，包括自定义每一种类型轮播图的样式、给轮播图增加装饰器等，点击查看 mp-banner/Slots

给轮播图增加装饰器

vue

<script setup>
import io from '@/io'

const {
  data,
  isFetching: isFetchingBanner,
  isFetched: isFetchedBanner,
} = io.useQuery(() =>
  io.banner.find({
    orderBy: '-priority,-created_at',
    query: io.query.compare('published', '=', true),
  })
)
</script>

<template>
  <mp-banner
    autoplay
    circular
    :data="data"
    height="100vw"
    :interval="4000"
    width="100vw"
  >
    <template #decoration="{current}">
      <view class="indicator-dots">
        <view
          v-for="(item, index) in data"
          :key="item.id"
          :class="[
            'indicator-dot',
            {'indicator-dot__active': current === index},
          ]"
        />
      </view>
    </template>
  </mp-banner>
</template>

自定义不同类型轮播图样式

以 image 类型的轮播图为例

vue

<script setup>
import io from '@/io'

const {
  data,
  isFetching: isFetchingBanner,
  isFetched: isFetchedBanner,
} = io.useQuery(() =>
  io.banner.find({
    orderBy: '-priority,-created_at',
    query: io.query.compare('published', '=', true),
  })
)
</script>

<template>
  <mp-banner
    autoplay
    circular
    :data="data"
    height="100vw"
    :interval="4000"
    width="100vw"
  >
    <template #image="{banner}">
      <image :src="banner.cover" class="custom-image-cover" />
    </template>
  </mp-banner>
</template>

Expose

mp-banner 向外部暴露了三个方法，分别是 slide、next、previous，可以手动切换轮播图，详情查看 mp-banner/Expose

手动切换轮播图

vue

<script setup>
import {ref} from 'vue'

import io from '@/io'

const {
  data,
  isFetching: isFetchingBanner,
  isFetched: isFetchedBanner,
} = io.useQuery(() =>
  io.banner.find({
    orderBy: '-priority,-created_at',
    query: io.query.compare('published', '=', true),
  })
)

const bannerRef = ref()
</script>

<template>
  <mp-banner
    circular
    ref="bannerRef"
    :autoplay="false"
    :data="data"
    height="100vw"
    :interval="4000"
    width="100vw"
  />

  <button @click="bannerRef.previous()">上一页</button>
  <button @click="bannerRef.next()">下一页</button>
</template>

通用轮播图数据表结构

数据表录入权限：不开放录入

数据行读写权限：登录用户可读，不开放写

字段/类型	字段注释/详细说明	规则/权限	值说明
id 类型：id	id	规则/权限：系统默认	默认值：系统默认
name 类型：string	名称	规则：非必填	无默认值
published 类型：boolean	已上架	规则：必填	默认值： false
priority 类型：integer	优先级，越大越靠前	规则：非必填	默认值： 0
type 类型：string	轮播图类型	规则：非必填	无默认值枚举值： image: 静态图片 gif: 动态图片 video: 视频
cover 类型：string	封面图片	规则：必填	无默认值
animated_cover 类型：string	当轮播图类型为 gif 或者 video 时必填	规则：非必填	无默认值
navigate_type 类型：string	跳转类型	规则：必填	无默认值枚举值： page: 页面 miniprogram: 小程序 webview: H5 none: 不跳转
appid 类型：string	小程序 AppID	规则：非必填	无默认值
navigate_path 类型：string	跳转路径	规则：必填	无默认值
edited_at 类型：integer	编辑时间	规则：非必填权限：客户端不可见	无默认值
edited_by 类型：pointer，指向 admin 表	编辑者	规则：非必填权限：客户端不可见	无默认值
created_by 类型：integer	created_by	规则/权限：系统默认	默认值：系统默认
created_at 类型：integer	created_at	规则/权限：系统默认	默认值：系统默认
updated_at 类型：integer	updated_at	规则/权限：系统默认	默认值：系统默认

字段/类型

字段注释/详细说明

规则/权限

值说明

类型：id

规则/权限：

系统默认

默认值：

系统默认

name

类型：string

名称

规则：

非必填

无默认值

published

类型：boolean

已上架

规则：

必填

默认值：

false

priority

类型：integer

优先级，越大越靠前

规则：

非必填

默认值：

type

类型：string

轮播图类型

规则：

非必填

无默认值

枚举值：

image: 静态图片

gif: 动态图片

video: 视频

cover

类型：string

封面图片

规则：

必填

无默认值

animated_cover

类型：string

当轮播图类型为 gif 或者 video 时必填

规则：

非必填

无默认值

navigate_type

类型：string

跳转类型

规则：

必填

无默认值

枚举值：

page: 页面

miniprogram: 小程序

webview: H5

none: 不跳转

appid

类型：string

小程序 AppID

规则：

非必填

无默认值

navigate_path

类型：string

跳转路径

规则：

必填

无默认值

edited_at

类型：integer

编辑时间

规则：

非必填

权限：

客户端不可见

无默认值

edited_by

类型：pointer，指向 admin 表

编辑者

规则：

非必填

权限：

客户端不可见

无默认值

created_by

类型：integer

created_by

规则/权限：

系统默认

默认值：

系统默认

created_at

类型：integer

created_at

规则/权限：

系统默认

默认值：

系统默认

updated_at

类型：integer

updated_at

规则/权限：

系统默认

默认值：

系统默认

Table schema

可直接在知晓云表数据表内导入该表结构

Click me to view the code

json

{
  "description": "Banner 配置表",
  "design_tool": {
    "fields": [
      {
        "name": "id",
        "type": "id",
        "description": "id"
      },
      {
        "name": "name",
        "type": "string",
        "description": "名称",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "published",
        "type": "boolean",
        "description": "已上架",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": true,
          "rules": []
        },
        "default": false
      },
      {
        "name": "priority",
        "type": "integer",
        "description": "优先级，越大越靠前",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        },
        "default": 0
      },
      {
        "name": "type",
        "type": "string",
        "description": "轮播图类型",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": [
            {
              "type": "choices",
              "value": ["image", "gif", "video"],
              "remark": ["静态图片", " 动态图片", "视频"]
            }
          ]
        }
      },
      {
        "name": "cover",
        "type": "string",
        "description": "封面图片",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": true,
          "rules": []
        }
      },
      {
        "name": "animated_cover",
        "type": "string",
        "description": "当轮播图类型为 gif 或者 video 时必填",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "navigate_type",
        "type": "string",
        "description": "跳转类型",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": true,
          "rules": [
            {
              "type": "choices",
              "value": ["page", "miniprogram", "webview", "none"],
              "remark": ["页面", "小程序", "H5", "不跳转"]
            }
          ]
        }
      },
      {
        "name": "appid",
        "type": "string",
        "description": "小程序 AppID",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "navigate_path",
        "type": "string",
        "description": "跳转路径",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": true,
          "rules": []
        }
      },
      {
        "name": "edited_at",
        "type": "integer",
        "description": "编辑时间",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": false,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "edited_by",
        "type": "reference",
        "description": "编辑者",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": false,
          "creatorVisible": false
        },
        "schema_name": "admin",
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "created_by",
        "type": "integer",
        "description": "created_by"
      },
      {
        "name": "created_at",
        "type": "integer",
        "description": "created_at"
      },
      {
        "name": "updated_at",
        "type": "integer",
        "description": "updated_at"
      }
    ]
  },
  "name": "banner",
  "row_read_perm": ["user:*"],
  "row_write_perm": [],
  "schema": {
    "fields": [
      {
        "name": "id",
        "type": "id",
        "description": "id"
      },
      {
        "name": "name",
        "type": "string",
        "description": "名称",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "published",
        "type": "boolean",
        "description": "已上架",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": true,
          "rules": []
        },
        "default": false
      },
      {
        "name": "priority",
        "type": "integer",
        "description": "优先级，越大越靠前",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        },
        "default": 0
      },
      {
        "name": "type",
        "type": "string",
        "description": "轮播图类型",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": [
            {
              "type": "choices",
              "value": ["image", "gif", "video"],
              "remark": ["静态图片", " 动态图片", "视频"]
            }
          ]
        }
      },
      {
        "name": "cover",
        "type": "string",
        "description": "封面图片",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": true,
          "rules": []
        }
      },
      {
        "name": "animated_cover",
        "type": "string",
        "description": "当轮播图类型为 gif 或者 video 时必填",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "navigate_type",
        "type": "string",
        "description": "跳转类型",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": true,
          "rules": [
            {
              "type": "choices",
              "value": ["page", "miniprogram", "webview", "none"],
              "remark": ["页面", "小程序", "H5", "不跳转"]
            }
          ]
        }
      },
      {
        "name": "appid",
        "type": "string",
        "description": "小程序 AppID",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "navigate_path",
        "type": "string",
        "description": "跳转路径",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": true,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "edited_at",
        "type": "integer",
        "description": "编辑时间",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": false,
          "creatorVisible": false
        },
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "edited_by",
        "type": "reference",
        "description": "编辑者",
        "acl": {
          "clientReadOnly": false,
          "clientVisible": false,
          "creatorVisible": false
        },
        "schema_name": "admin",
        "constraints": {
          "required": false,
          "rules": []
        }
      },
      {
        "name": "created_by",
        "type": "integer",
        "description": "created_by"
      },
      {
        "name": "created_at",
        "type": "integer",
        "description": "created_at"
      },
      {
        "name": "updated_at",
        "type": "integer",
        "description": "updated_at"
      }
    ]
  },
  "write_perm": []
}

轮播图 - mp-banner ​

使用方法 ​

基础用法 ​

使用自定义插槽 ​

给轮播图增加装饰器 ​

自定义不同类型轮播图样式 ​

Expose ​

手动切换轮播图 ​

通用轮播图数据表结构 ​

Table schema ​

相关文档 ​

轮播图 - mp-banner

使用方法

基础用法

使用自定义插槽

给轮播图增加装饰器

自定义不同类型轮播图样式

Expose

手动切换轮播图

通用轮播图数据表结构

Table schema

相关文档