小程序模板網(wǎng)

小程序-記牌器

發(fā)布時(shí)間：2018-09-08 09:41 所屬欄目：小程序開(kāi)發(fā)教程

這個(gè)想法來(lái)自看直播時(shí)看主播斗地主時(shí)經(jīng)常由于沒(méi)有記牌器，判斷失誤導(dǎo)致輸豆，所以做了這個(gè)記牌器。估計(jì)不會(huì)有人用 :laughing:，就當(dāng)作練手，熟悉小程序的整個(gè)開(kāi)發(fā)流程哈哈。 沒(méi)想到提交第二天就審核通過(guò)了

截圖

 

思路比較簡(jiǎn)單只有一個(gè)頁(yè)面

1.可選一副牌或兩副牌

2.點(diǎn)擊相應(yīng)牌減少對(duì)應(yīng)牌的數(shù)量, 數(shù)量為0時(shí)該圖標(biāo)變灰

3.可撤銷(xiāo)，撤銷(xiāo)操作僅保留最近100個(gè)點(diǎn)擊操作

4.重置操作會(huì)清空所有操作記錄

開(kāi)發(fā)上選擇的是 mpvuempvue.com/

然后直接使用grid布局對(duì)卡牌進(jìn)行排列

<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>
復(fù)制代碼

操作方法

// 點(diǎn)擊操作
handleHuase (obj) {
// 這里用來(lái)記錄操作歷史
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
  }
}
復(fù)制代碼
 
// 撤銷(xiāo)操作
rollback () {
  let pokers = this.updateHistory[this.updateHistory.length - 1]
  this.pokers = pokers
  this.updateHistory.pop(this.updateHistory.length - 1)
}
復(fù)制代碼


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址：http://22321a.com/wxmini/doc/course/24788.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)：800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)