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

本篇内容介绍了“微信小程序怎么实现翻牌小功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

页面

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

“微信小程序怎么实现翻牌小功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！