mk-wxcom-sequenceframe

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

作者：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四个文件移动到自定义文件夹内使用