快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)翻牌小功能

更新時間：2022年04月20日 15:28:14 作者：萌村村花楊小花

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)翻牌小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序翻牌小功能，供大家參考，具體內(nèi)容如下

頁面

<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({
? ? /**
? ? ?* 頁面的初始數(shù)據(jù)
? ? ?*/
? ? 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;
? ? ? ? //得到當(dāng)前的卡片
? ? ? ? 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效果的。就是單純的點擊切換。但是是可以點一張切換一張的。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: