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

作者：Kevin.W

npm安装：npm i mk-wxcom-sequenceframe

json引用

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

页面引用

<sequence-frame
  mode="normal"
  url="{{xlz}}"
  width="750"
  sec="20"
  preload="50"
  loop="{{false}}"
  destroy="{{false}}"
  bind:change="onChange"
></sequence-frame>

js示例

onLoad() {
  this.sf = this.selectComponent("#sf");
  // this.sf为返回的序列帧实例化内容
},
onChange(e) {
  // e.detail为返回的序列帧状态
  console.log(e.detail)
},
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） | | onChange | Function | 否 | 序列帧状态回调 |

方法说明

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

注意

• 图片切换时间最好不要低于10ms每张
• 图片数量最好不超过50张，且单张图片尽量不要大于 80kb
• 图片预加载时间最好不要低于50ms，图片越大预加载时间应越长
• 请在下载好之后直接将js/json/wxml/wxss四个文件移动到自定义文件夹内使用