Wechat lucky draw how to do Mini Program similar flipping style

This article mainly introduces the relevant knowledge of how Wechat lottery Mini Program similar flip style is done, the content is detailed and easy to understand, the operation is simple and quick, and has a certain reference value. I believe that after reading this Wechat lucky draw Mini Program similar flip style how to do the article will have a harvest, let's take a look.

Flip and disrupt the activities of the lucky draw, the demand is like this, the nine palace grid cards, first show all the prizes head on, and then flip the cards, disrupt the order, click on the cards, and then draw the lottery.

1 Card Flip We first render 9 cards in dom.

{{cardItem.front}} {{cardItem.back}} script

AllMove () {/ / 110is the width and margin of the card this.methods.shuffle.call (this, 110) let timer = setTimeout (()) = > {clearTimeout (timer) this.methods.shuffle.call (this, 0) this.$apply ()}, 1000)}, / / shuffle shuffle (translateUnit) {let curCardData = this.cardDatacurCardData.map ((item, index) = > {let animation = wepy.createAnimation ({duration: 500 timingFunction: 'ease'}) animation.export () switch (index) {case 0:animation.translate (translateUnit) TranslateUnit). Step () breakcase 1:animation.translate (0, translateUnit). Step () breakcase 2:animation.translate (- translateUnit, translateUnit). Step () breakcase 3:animation.translate (translateUnit, 0). Step () breakcase 4:animation.translate (0,0). Step () breakcase 5:animation.translate (- translateUnit, 0). Step () breakcase 6:animation.translate (translateUnit,-translateUnit). Step () breakcase 7:animation.translate (0,-translateUnit). Step () breakcase 8:animation.translate (- translateUnit) -translateUnit) .step () break} item.animationData = animation.export ()}) this.cardData = curCardDatathis.$apply ()}, 3 cards flip dom code

{{cardItem.front}} {{cardItem.back}} script code

Data defines an object with curIndex =-1 data = {curOpen:-1,} methods = {/ / lottery itemChage (item, curIndex) {this.carddata [curIndex]. Front = 'iphone x'console.log (item, curIndex) this.curOpen = curIndex}} less

.card.getforth {.front {z color indexlv 2 position transform: rotateY (0deg);} .back {z he indexlv 1x transform: rotateY (180deg);}} can we also use the two-dimensional array layout attribute in the card?

ResetData () {const total = 9 / / Total const lineTotal = 3 / / single line curCardData.map ((item, index) = > {let curCardData = this.cardDatalet x = index% lineTotallet y = parseInt (index / lineTotal) item.twoArry = {x, y}})} the difference of two-dimensional layout is used for displacement in in-place mobile painting

/ shuffle shuffle (translateUnit) {let curCardData = this.cardDatacurCardData.map ((item, index) = > {let animation = wepy.createAnimation ({duration: 500 ease' function: 'ease'}) animation.export () const translateUnitX = translateUnit * (1-item.twoArry.x) const translateUnitY = translateUnit * (1-item.twoArry.y) animation.translate (translateUnitX, translateUnitY). Step () item.animationData = animation.export () this.cardData = curCardDatathis.$apply ()} This is the end of the article on "how to do Mini Program similar flipping style in Wechat lucky draw". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to do similar flipping styles in Wechat raffle". If you want to learn more, you are welcome to follow the industry information channel.