Focus焦点图

author: 闫申申

定义

焦点图组件。

图片展示

Focus 焦点图 - 图1

代码演示

  2. import Focus from 'pile/dist/components/focus'
  3. <Focus className="focus-demo"
  4.   index = {0}
  5.   width = {"375px"}
  6.   loop = {true}
  7.   timer = {5000}
  8.   direction = "left"
  9.   duration = {200}
  10. >
  11.   <div className="focus-demo-item item-1">
  12.     1<div className="text-shadow">此处是文字标题一</div><
  13.   /div>
  14.   <div className="focus-demo-item item-2">
  15.     2<div className="text-shadow">此处是文字标题二</div><
  16.   /div>
  17.   <div className="focus-demo-item item-3">
  18.     3<div className="text-shadow">此处是文字标题三</div><
  19.   /div>
  20. </Focus>

属性

参数 描述 数据类型 默认值
index 默认展开索引位置 number 0
width 焦点图区域宽度 string 375px
loop 是否循环 bool true
timer 自动滚动的时间间隔 number／null null
direction 方向，left：向左，right：向右 string left
duration 滚动动画时长 number 200
auto 是否自动播放 bool true

原文: https://didi.github.io/pile.js/docs/2017/08/develop-components-focus.html