微信小程序实现翻牌小功能
作者:萌村村花杨小花 发布时间:2023-07-02 05:18:37
标签:微信小程序,翻牌
本文实例为大家分享了微信小程序翻牌小功能,供大家参考,具体内容如下
页面
<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效果的。就是单纯的点击切换。但是是可以点一张切换一张的。
来源:https://blog.csdn.net/ysq0317/article/details/83582481
0
投稿
猜你喜欢
- 异常的传递性在 Python 中,异常的传递性指的是,当一个异常没有被处理时,它会沿着调用栈向上抛出,直到被处理或者导致程序崩溃。具体来说,
- 神经网络一般用GPU来跑,我们的神经网络框架一般也都安装的GPU版本,本文就简单记录一下GPU使用的编写。GPU的设置不在model,而是在
- MySQL 客户端连接成功后,通过 show [session|global]status 命令 可以提供服务器状态信息,也可以在操作系统上
- 怎样才能将在表A取得的数据插入另一个表B中?(1)对于表A和表B两个表结构完全相同的话〔字段个数,相应字段的类型等等〕,可以使用 inser
- 前言:在开发过程中,一定会经常碰到需要根据指定的字段排序来显示结果的需求。还是以前文的订单表为例,假设查询“张三&
- element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下对于我
- 本文实例讲述了Python实现的对本地host127.0.0.1主机进行扫描端口功能。分享给大家供大家参考,具体如下:前面一篇《Python
- 本文实例讲述了Python操作MySQL简单实现方法。分享给大家供大家参考。具体分析如下:一、安装:安装MySQL安装MySQL不用多说了,
- 在Python个人博客程序开发实例框架设计中,我们已经完成了 数据库设计、数据准备、模板架构、表单设计、视图函数设计、电子邮件支持 等总体设
- 一、mysqlcheck简介mysqlcheck客户端可以检查和修复MyISAM表。它还可以优化和分析表。mysqlcheck的功能类似my
- 一、MySQL Workbench简介MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品。
- 这是我使用python写的第一个类(也算是学习面向对象语言以来正式写的第一个解耦的类),记录下改进的过程。分析需求最初,因为使用time模块
- sql语句,将数据库一条数据通过分隔符切割成多列 需求场景应对措施效果展示具体代码需求场景在实际场景之中,我们有时候会遇到一种情况,就是数据
- documentFragment 是一個無父對象的document對象.他支持以下DOM2方法:appendChild, cloneNode
- 本文实例讲述了Python学习笔记基本数据结构之序列类型list tuple range用法。分享给大家供大家参考,具体如下:list 和
- 一次性验证码,英文是 One Time Password,简写为 OTP,又称动态密码或单次有效密码,是指计算机系统或其他数字设备上只能使用
- <%'asp事务处理。'测试数据库为sql server,服务器为本机,数据库名为test,表名为a,两个字段id(i
- 一、深复制与浅复制列表是Python中自带的一种数据结构,在使用列表时,拷贝操作不可避免,下面简单讨论一下列表的深复制(拷贝)与浅复制首先看
- 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。我们永远不
- 当数据量猛增的时候,大家都会选择库表散列等等方式去优化数据读写速度。笔者做了一个简单的尝试,1亿条数据,分100张表。具体实现过程如下。首先