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

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

页面

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

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