1.0.6 • Published 4 years ago
ai-search-piccarousel v1.0.6
Header
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { PicCarousel } from 'ai-search-piccarousel';
import { data, fields } from './dataSource';
class App extends Component {
render() {
return (
<div style={{width: '200px', height: '247px'}}>
<PicCarousel picDetailFields={picDetailFields} picDetailDataConfig={changeData} dataConfig={changeData} imgList={data} fields={fields} />
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);props
| 参数 | 类型 | 说明 | 必填 | 默认值 |
|---|---|---|---|---|
| className | string | 组件自定义样式 | 否 | - |
| imgList | object | 传入的数据 | 否 | - |
| fields | object | config配置文件 | 否 | - |
| picDetailFields | object | 图片详情config配置文件 | 否 | - |
| picDetailDataConfig | function | 图片详情数据转换函数 | 否 | - |
| dataConfig | function | 数据转换函数 | 否 | - |
data示例
[
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1UV54NMHqK1RjSZFEXXcGMXXa-120-120.jpg",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1NmDCaCzqK1RjSZPcXXbTepXa-690-965.png",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB1rEIFulr0gK0jSZFnXXbRRXXa-128-128.ico",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
},
{
"recordType":"face",
"identifier":"362330199112138300",
"record":{
"xm":"姓名",
"sfzhm":"身份证号码",
"dmyxsd":"99",
"gdJd":"高德经度",
"gdWd":"高德维度",
"ossUrl":"https://img.alicdn.com/tfs/TB199gyMYY1gK0jSZTEXXXDQVXa-1425-763.gif",
"dxwyid":"高德经度",
"cxsj":"出现时间",
"dz":"地址地址地址地址地址地址地址地址"
},
"score":0.75
}
]config示例
头像轮播图
{
imgCode: 'ossUrl',
}
图片详情
{
imgCode: 'ossUrl',
SimilarityCode: {
value: 'dmyxsd',
label: '相似度',
},
timeCode: {
value: 'cxsj',
label: '抓拍时间',
},
addressCode: {
value: 'dz',
label: '抓拍时间',
}
}