微信小程序实现翻牌小功能
本文实例为大家分享了微信小程序翻牌小功能，供大家参考，具体内容如下
页面
<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效果的。就是单纯的点击切换。但是是可以点一张切换一张的。
