以下为序列帧组件的使用方法（淘宝小程序）

作者：Kevin.W

npm安装：npm i mk-mycom-sequenceframe

json引用

"usingComponents": {
  "sequence-frame": "/pages/mk-mycom-sequenceframe/sequence-frame"
}

页面引用

<sequence-frame
  mode="normal" 
  url="{{xlz}}"
  width="{{750}}"
  sec="{{100}}"
  preload="{{100}}"
  loop="{{false}}"
  destroy="{{false}}"
  onRef="onRef" 
  onChange="onChange"
></sequence-frame>

js示例

onRef(e) {
  // e为返回的序列帧实例化内容
  this.sf = e;
},
onChange(e) {
  // e为返回的序列帧状态
  console.log(e);
},
pause(){
  this.sf.pause();
},
stop(){
  this.sf.stop();
}

属性说明

| 字段名 | 类型 | 必填 | 描述 | | --- | --- | --- | --- | | mode | String | 否 | 序列帧模式（支持按钮--btn，常态--normal两种模式，默认为常态） | | url | Array | 是 | 序列帧图片 | | width | Number | 是 | 图片宽度 | | sec | Number | 否 | 图片切换时间（毫秒，默认10ms） | | preload | Number | 否 | 图片预加载时间（毫秒，默认为50ms） | | loop | Boolean | 否 | 是否循环（默认为false） | | destroy | Boolean | 否 | 结束时是否销毁（默认为false） | | onRef | Function | 否 | 序列帧实例化 | | onChange | Function | 否 | 序列帧状态回调 |

方法说明

| 方法名 | 描述 | | --- | --- | | pause | 序列帧暂停（不会回到第一张） | | stop | 序列帧停止 |

注意

• 图片切换时间最好不要低于10ms每张
• 图片数量最好不超过50张，且单张图片尽量不要大于 80kb
• 图片预加载时间最好不要低于50ms，图片越大预加载时间应越长