微信小程序 点击卡片切换 动画效果
微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
正文:
html
<view class='aa'><image animation="{{animationData0}}" class='img0' style='z-index: {{index_0}};' bindtap='bindtap_img' id='0' src="{{clubs[0].image}}"></image><image animation="{{animationData1}}" class='img1' style='z-index: {{index_1}};' bindtap='bindtap_img' id='1' src="{{clubs[1].image}}"></image><image animation="{{animationData2}}" class='img2' style='z-index: {{index_2}};' bindtap='bindtap_img' id='2' src="{{clubs[2].image}}"></image>
</view><view class='is_height_1' id="is_height_1" style='height:120rpx;width:300rpx;'></view>
<view id="is_height_2" style='height:380rpx;width:200rpx;'></view>
css
page{background: #3B4595
}
.aa{position: relative;margin-top: 50rpx;
}
.img0{border-radius: 5rpx;position: absolute;left:180rpx;width: 375rpx;height: 230rpx;}
.img1{border-radius: 5rpx;position: absolute;left: 60rpx;width: 240rpx;height: 150rpx;top: 40rpx;
}
.img2{border-radius: 5rpx;position: absolute;left: 440rpx;width: 240rpx;height: 150rpx;top: 40rpx;
}
js
var is_1_height, is_1_width, is_2_height, is_2_width, is_img0_width, is_img0_height, is_img1_width, is_img1_height;
var item = 0;
var fangxiang;
Page({data: {index_0: 3,clubs: [{ image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532684585498&di=39c818a83b5f9d295a662dc9cb3deb4a&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0117e2571b8b246ac72538120dd8a4.jpg%401280w_1l_2o_100sh.jpg' }, { image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532684585498&di=03509b946c2086ab814276a076ec9069&imgtype=0&src=http%3A%2F%2Fimg07.tooopen.com%2Fimages%2F20170316%2Ftooopen_sy_201956178977.jpg' }, { image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532684585497&di=d3bb16864ad73dfedc225209a218ed74&imgtype=0&src=http%3A%2F%2Fwww.qqma.com%2Fimgpic2%2Fcpimagenew%2F2018%2F4%2F5%2F6e1de60ce43d4bf4b9671d7661024e7a.jpg' }]},onShow: function () {this.animation1 = this.animation2 = this.animation0 = wx.createAnimation({duration: 600,timingFunction: 'ease',})},bindtap_img: function (e) {var that = this;switch (item) {case 0:if (e.target.id == 0) {this.setData({index_0: 3,})item = 0;} else if (e.target.id == 1) {this.setData({index_2: 0,index_0: 2,index_1: 3,})fangxiang = 'right';item = 1;} else if (e.target.id == 2) {this.setData({index_1: 0,index_0: 2,index_2: 3,})fangxiang = 'left';item = 2}break;case 1:if (e.target.id == 0) {this.setData({index_2: 0,index_1: 2,index_0: 3,})item = 0} else if (e.target.id == 1) {this.setData({index_1: 3,})fangxiang = 'right';item = 1} else if (e.target.id == 2) {this.setData({index_0: 0,index_1: 2,index_2: 3,})fangxiang = 'left';item = 2}break;case 2:if (e.target.id == 0) {this.setData({index_0: 3,index_2: 2,index_1: 0,})item = 0} else if (e.target.id == 1) {this.setData({index_0: 0,index_2: 2,index_1: 3,})fangxiang = 'right';item = 1} else if (e.target.id == 2) {this.setData({index_2: 3,})fangxiang = 'left';item = 2}break;default:console.log('11111')}if (e.target.id == 1) {// 先旋转同时放大,然后平移this.animation0.scale(is_img1_width / is_img0_width, is_img1_height / is_img0_height).translateX(is_1_width).step()this.setData({animationData0: this.animation0.export(),})this.animation1.scale(is_img0_width / is_img1_width, is_img0_height / is_img1_height).translateX(is_1_height).step()this.setData({animationData1: this.animation1.export(),})this.animation2.scale(1, 1).translateX(-is_2_height).step()this.setData({animationData2: this.animation2.export(),})} else if (e.target.id == 2) {// 先旋转同时放大,然后平移this.animation0.scale(is_img1_width / is_img0_width, is_img1_height / is_img0_height).translateX(-is_1_width).step()this.setData({animationData0: this.animation0.export(),})this.animation1.scale(1, 1).translateX(is_2_height).step()this.setData({animationData1: this.animation1.export(),})this.animation2.scale(is_img0_width / is_img1_width, is_img0_height / is_img1_height).translateX(-is_1_height, is_2_width).step()this.setData({animationData2: this.animation2.export(),})} else if (e.target.id == 0) {// 先旋转同时放大,然后平移this.animation0.scale(1, 1).translateX(0).step()this.setData({animationData0: this.animation0.export(),})this.animation1.scale(1, 1).translateX(0).step()this.setData({animationData1: this.animation1.export(),})this.animation2.scale(1, 1).translateX(0).step()this.setData({animationData2: this.animation2.export(),})}var clubs = this.data.clubs;this.setData({index: e.target.id,current: clubs[e.target.id]})},onLoad: function (options) {wx.createSelectorQuery().select('#is_height_1').boundingClientRect(function (rect) {is_1_width = Number(rect.width)is_1_height = Number(rect.height) // 节点的宽度}).exec();wx.createSelectorQuery().select('#is_height_2').boundingClientRect(function (rect) {is_2_width = Number(rect.width) // 节点的宽度is_2_height = Number(rect.height) // 节点的宽度}).exec();wx.createSelectorQuery().select('.img0').boundingClientRect(function (rect) {is_img0_width = Number(rect.width) // 节点的宽度is_img0_height = Number(rect.height) // 节点的宽度console.log(is_img0_width)}).exec();wx.createSelectorQuery().select('.img1').boundingClientRect(function (rect) {is_img1_width = Number(rect.width) // 节点的宽度is_img1_height = Number(rect.height) // 节点的宽度}).exec();},
})
微信小程序 点击卡片切换 动画效果相关推荐
- 微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果 思路: 使用微信小程序的swiper组件,使其竖向滑动 分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页 问题: 加载多个视频时,多个视频会同时播放 效果图 ...
- 微信小程序点击图片切换图片
实现的效果图 实现的方式有2中 先说下思路 1 使用wx:if 写2个图片 点击的显示一张即可, 2 使用数据传递当拿到图片的时候更换图片即可. 看下代码 2中方式:xml <view clas ...
- 微信小程序 点击切换tab跟随动画
微信小程序 点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
- 微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
- 微信小程序点击tab栏切换,点击切换某个tab滚动到中间( uniapp )
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
- 微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换 一.简介 1.核心思想 二.实现 1.wxml实现 2.js实现 3.wxss实现 三.参考和总结 四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
- 微信小程序 实现集卡 合成动画
微信小程序 实现集卡 合成动画 效果图 微信小程序动画 搭建结构 样式 js 效果图 微信小程序动画 创建一个动画实例 animation 调用实例的方法来描述动画 最后通过动画实例的 export ...
- 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
- 微信小程序中的Tab切换
微信小程序中的Tab切换 使用步骤 使用步骤 代码如下(示例): 定义一个状态status data: {status: 0,}, 代码如下(示例): 在点击切换时利用status来切换根据index ...
最新文章
- 【计算机网络】数据链路层 : 概述 ( 基本概念 | 功能 | 为 “网络层“ 提供的服务 )
- C# asp.net mvc 配置多个route 参数
- Lesson 16.1016.1116.1216.13 卷积层的参数量计算,1x1卷积核分组卷积与深度可分离卷积全连接层 nn.Sequential全局平均池化,NiN网络复现
- 通过History Trends Unlimited通过统计台式机Chrome浏览器Top10网页历史访问量(2021.11.23)
- Django从理论到实战(part51)--User模型
- Java技术回顾之JNDI--实例
- Shell判断参数是否为数字的6种方法(是否为整形)
- 【PowerShell】PS中 the fuck 插件(PoShFuck)将 wtf 搜索引擎从 Google 改为 Baidu 或者 Bing
- Android4.2之Camera系统HAL调用流程
- 【20171227】json
- openwrt 遇到问题三 高通9531编译过程
- Modbus驱动库—libmodbus驱动库的使用
- 四象限法推导lm曲线_数据分析四象限法详解
- m3u8流媒体下载 swift
- 2019年会总结+自我反思
- 如何卸载手机系统自带应用(无需root)?【亲测有用】
- 第三方打码平台超级鹰图文识别,md5算法加密
- [USACO06NOV]玉米田Corn Fields
- 记录解决windows XP启动加载个人设置慢的问题
- linux右键没有创建新文件夹,将新建文档添加回Ubuntu 18.04中的右键菜单