weapp-spinner-plugin

一个weapp的spinner插件。

结构 | State

|
|- example // 示例目录
|  |- spinner // 开发环境下输出目录
|  |- pages
|  |- app.js
|  |- app.json
|
|- dist // 编译输出目录
|- src // 源文件

编译 | Compile

# 1 step
npm i

# 2 step
  # 开发
  gulp # 生成的文件在 'example/spinner/' 内

  # 编译
  gulp deploy # 生成的文件在 'dist/' 内

使用 | Use

1. 在js, wxml, wxss中引入spinner相对应的文件。
2. 在js文件的data中设置初始变量，数据类型为JSON数组，index项必填，其他项可不填，初始化为默认设置

  data:{
    spinners:[{
      index: 0, // 索引
      min: 0, // 最小值
      max: 10, // 最大值
      val: 0 // 初始数据
    }]
  }

3. 在wxml中添加相应的模版标签

<block wx:for={{spinners}} wx:key="*this">
  <template is='spinner' data='{{...item}}'></template>
</block>

4. 在onLoad中初始化spinner

onLoad(){
  new Spinner({
    // options
  })
}

默认值 | Default

{
  val: 0,
  max: 10,
  min: 0,
  target: 'spinners'
}

name	type	defalut	description
val	number	0	初始值
max	number	10	最大值
min	number	0	最小值
target	string	spinners	page.data中spinner的JSON数组名字，spinner的JSON数组需要单独存放，不能和其他数据混在一起用。 一个new Spinner()对应一个target

可以在初始化的时候修改默认值

new Spinner({
  val: 10,
  max: 100,
  min: -100,
  target: 'productCount'
});

事件 | Event

当spinner中的数字改变的时候，触发onChange事件，可以在初始化的时候设置。 返回值data为当前改变的那个spinner的信息。

onLoad(){
  new Spinner({
    onChange: this.spinnerChange
  });

  // other codes...
},
spinnerChange(data){
  // do something...

  /*
    data: {
      index: ...,
      max: ...,
      min: ...,
      val: ...
    }
  */
}