1.0.5 • Published 2 years ago
mk-mycom-sequenceframe v1.0.5
以下为序列帧组件的使用方法（淘宝小程序）
作者：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，图片越大预加载时间应越长