mk-mycom-sequenceframe

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

作者：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，图片越大预加载时间应越长