目录
1、实现效果
页面加载了一组卡片，点击任意一个就可以进行翻转。
2、代码实现
2.1 准备数据
这里先声明一组静态JSON数据，方便页面动态加载。
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 页面实现
<view class="brand-classify">
<view class="brand-list" wx:for="{
{tabBrandList}}" wx:key="index">
<view class="brand card1" data-id="1" bindtap="rotateFn" animation="{
{animation1}}">
<image src="{
{item.icon}}"></image>
<text>{
{item.name}}</text>
</view>
<view class="brand card2" data-id="2" bindtap="rotateFn" animation="{
{animation2}}">
<image src="{
{item.icon}}"></image>
<text>{
{item.name}}</text>
</view>
</view>
</view>使用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实现
tabBrandList：的数据是2.1中声明的JSON静态数据，页面初始化的时候会进行数据加载。
Page({
/**
* 页面的初始数据
*/
data: {
animation1: null, //正面卡片动画
animation2: null, //背面卡片动画
/**品牌导航 */
tabBrandList: 2.1的JSON值
},
brandListShow: function (e) {
var tabBrandList = indexData.tabBrandList[e];
this.setData({
tabBrandList: tabBrandList
})
},
rotateFn(e) {
let that = this
let id = e.currentTarget.dataset.id
// 点击正面
if (id == 1) {
this.setData({
animation1: that.animation.rotateY(180).step().export(),
animation2: that.animation.rotateY(0).step().export(),
})
} else { //点击反面
this.setData({
animation1: that.animation.rotateY(0).step().export(),
animation2: that.animation.rotateY(180).step().export(),
})
}
},
/**
* 生命周期函数--监听页面加载
*/
animation: wx.createAnimation({
duration: 1000,
timingFunction: 'linear'
}),
onLoad(options) {
//加载品牌分类导航
this.brandListShow(1);
}
}
)