微信小程序实现翻牌小功能
作者：萌村村花杨小花
这篇文章主要为大家详细介绍了微信小程序实现翻牌小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序翻牌小功能，供大家参考，具体内容如下
页面
<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效果的。就是单纯的点击切换。但是是可以点一张切换一张的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。