xquery小程序简易步进器

 

这样一个简单的组件，翻了ant.design才知道这种组件叫做步进器(steper)，步进器常用于购物车等需要增减数量的场景，最近的旅游项目中用于增减房间数和人数，从产品的角度来理解步进器很简单，但在开发角度来说需要适应多种场景及控制一些状态

• 边界值(最大值，最小值)，初始值，步进值(一次增减数量)需要可控
• 边界状态，即超出后显示为什么状态
• 可供外部设置边界状态的api方法
• 内部加减方法
• 可供外部调用的加减方法(一些场景中，外部有一个总量约束，比如sku场景)
• 加减回调方法，比如当数量超出时提示用户相关信息
• 多实例模式，实例之间即隔离又能交互

大致需求如上，demo及实现部分如下

GITHUB源码

小程序代码片段

wxml

<view class="container">
  <ui-item item="{{steperConfig}}" />
</view>
复制代码

Page

因为是直接使用Item组件实现，所以组件写在Page页面中，当然独立成组件看需求了

const Pager = require('../components/aotoo/core/index')
let lib = Pager.lib

function mkSteper(id=lib.suid('step_'),min,max,step=1) {
  return {
    $$id: id,itemClass: 'steper-class',title: [
      {title: '-',aim: 'reduce',0);">'steper-reduce'},{title: '0',0);">'custom',0);">'steper-counter'},0);">'+',0);">'plus',0);">'steper-plus'},],methods: {
      __ready(){
        this.count = 0
        this.min = min||this.max = max||10
        this.step = step||1
        this.stat = {
          reduce: true,plus: true
        }
      },reduce(e,param,inst){
        let step = this.step

        if (!inst) {
          inst = this.children[0]
        }

        if (e === false) {
          this.stat.reduce = false
          inst.addClass('disable')
        }

        true) {
          true
          inst.removeClass(if (typeof e === 'number') {
          step = e
        }

        this.count -= step
        if (this.count <= this.min) {
          this.count = this.min
          this.count < this.max && !this.stat.plus) {
          this.stat.plus = true
          let $plus = inst.siblings('steper-plus')
          $plus.removeClass('disable')
        }
        this.changeNum(inst)
        this.hooks.emit(this.count},this)

      },plus(e,0);">2]
        }

        this.count += step
        this.count >= this.max) {
          this.max
          this.count > this.min && !this.stat.reduce) {
          true
          let $reduce = inst.siblings('steper-reduce')
          $reduce.removeClass(this)
      },changeNum(inst){
        let count = this.count
        if (typeof inst === 'number') {
          count = inst
          inst = undefined
        }

        1]
        }

        let $counter = inst.siblings('steper-counter')
        $counter.update({
          title: count
        })
      }
    }
  }
}

Pager({
  data: {
    steperConfig: mkSteper('steper'),},onReady(){
    let $steper = this.getElementsById('steper')
    $steper.hooks.on(this.count === 10) {
        Pager.alert('不能再多了，仓库没货了')
      }
    })
    $steper.hooks.on(if (param.count <= 0) {
        Pager.alert('大哥，买点啊')
      }
    })
  }
})
复制代码