您当前的位置: 首页 > 解决方案

小程序-记牌器

  • 作者: admin
  • 发布于 2018-09-08 13:40:38
  • 来源:  
  • 栏目:解决方案

导语: 这个想法来自看直播时看主播斗地主时经常由于没有记牌器,判断失误导致输豆,所以做了这个记牌器。估计不会有人用 :laughing:,就当作练手,熟悉小程序的整个开发流程哈哈

 这个想法来自看直播时看主播斗地主时经常由于没有记牌器,判断失误导致输豆,所以做了这个记牌器。估计不会有人用 :laughing:,就当作练手,熟悉小程序的整个开发流程哈哈。 没想到提交第二天就审核通过了

截图

04.jpg

思路比较简单只有一个页面

1.可选一副牌或两副牌

2.点击相应牌减少对应牌的数量, 数量为0时该图标变灰

3.可撤销,撤销操作仅保留最近100个点击操作

4.重置操作会清空所有操作记录

开发上选择的是 mpvuempvue.com/

然后直接使用grid布局对卡牌进行排列

<div class="gird-container">
  <div class="gird-item" v-for="(poker, index) in pokers" :key="index">
    <card :poker="poker" :index="index" @handleHuase="handleHuase" @handleWang="handleWang">
    </card>
  </div>
</div>
复制代码

操作方法

// 点击操作
handleHuase (obj) {
// 这里用来记录操作历史
this.updateHistory.push(JSON.parse(JSON.stringify(this.pokers)))
  if (this.pokers[obj.index][obj.huase] > 0) {
    this.pokers[obj.index][obj.huase] -= 1
    this.pokers[obj.index].count -= 1
  } else {
    this.pokers[obj.index][obj.huase] = this.defaultCount
    this.pokers[obj.index].count += 1
  }
}
复制代码
// 撤销操作
rollback () {
  let pokers = this.updateHistory[this.updateHistory.length - 1]
  this.pokers = pokers
  this.updateHistory.pop(this.updateHistory.length - 1)
}
复制代码

git地址

github.com/jinggoing/m…



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部