微信小程序：实现一组卡片翻转的效果

微信小程序：实现一组卡片翻转的效果

目录

​​1、实现效果​​

​​2、代码实现​​

​​2.1 准备数据​​

​​2.2 wxml 页面实现​​

​​2.3 wxss布局​​

​​2.4 js实现​​

1、实现效果

2、代码实现

2.1 准备数据

var tabBrandList ={ "1": [{ "id": "1", "name": "音儿", "icon": "xx.jpg" },{ "id": "2", "name": "诗篇", "icon": "xx.jpg" },{ "id": "3", "name": "恩裳", "icon": "xx.jpg" },{ "id": "4", "name": "伊芙丽", "icon": "xx.jpg" }] }

2.2 wxml 页面实现

{{item.name}} {{item.name}}

使用wx:for 遍历2.1 的json数据，每一条数据都有正反两个。

绑定事件：bindtap

动画效果：animation

2.3 wxss布局

.brand-classify { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; border-radius: 5%; }.brand-list { position: relative; margin: 0 10rpx; height: 200rpx; width: 170rpx; } .brand { background-color: white; position: absolute; transition: all 1s; /* 不显示背面 */ backface-visibility: hidden; border-radius: 10rpx; cursor: pointer; display: flex; align-items: center; flex-direction: column; width: 100%; } .card1 { } .card2 { /* 默认显示正面 */ transform: rotateY(-180deg); } .brand image { width: 120rpx; height: 120rpx; } .brand text { font-size: 25rpx; margin-bottom: 15rpx;}

2.4 js实现

运行过程中有问题可以留言哦~~~

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。