微信小程序怎么實現翻牌小功能

本篇內容介紹了“微信小程序怎么實現翻牌小功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

頁面

<view id="container">
    <view wx:for="{{newArr}}" class='cards'>
        <view class="card card_a" style='display:{{item.showA}}' bindtap='change' data-id='{{item.id}}'>A</view>
        <view class="card card_b" style='display:{{item.showB}}' bindtap='change' data-id='{{item.id}}'>B</view>
    </view>
</view>

css

#container {
    width: 100%;
    height: 350rpx;
}

.cards {
    width: 350rpx;
    height: 100%;
    margin: 10rpx;
    float: left;    
}

.card {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.card_a {
    background-color: pink;
}

.card_b {
    background-color: green;
}

js

Page({
    /**
     * 頁面的初始數據
     */
    data: {
        newArr: [{
                id: 1,
                showA: 'block',
                showB: 'none',
            },
            {
                id: 2,
                showA: 'block',
                showB: 'none',
            },
            {
                id: 3,
                showA: 'block',
                showB: 'none',
            }, {
                id: 4,
                showA: 'block',
                showB: 'none',
            }
        ],
        firstClickId: 0
    },
    //點擊切換卡片
    change: function(e) {
        var id = e.currentTarget.dataset.id;
        this.data.firstClickId = id;
        var newArr = this.data.newArr;
        //得到當前的卡片
        var currentData = newArr[id - 1];
        if (currentData.showA == 'block') {
            currentData.showA = 'none';
            currentData.showB = 'block';
            newArr[id - 1] = currentData;
            this.setData({
                newArr: newArr
            })
        } else {
            currentData.showA = 'block';
            currentData.showB = 'none';
            newArr[id - 1] = currentData;
            this.setData({
                newArr: newArr
            })

        }
    },
})

上面是最簡單的翻牌效果，是沒有3d效果的。就是單純的點擊切換。但是是可以點一張切換一張的。

“微信小程序怎么實現翻牌小功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！