微信小程序实现翻牌小功能

本文实例为大家分享了微信小程序翻牌小功能，供大家参考，具体内容如下

页面

<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效果的。就是单纯的点击切换。但是是可以点一张切换一张的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。