小程序之卡片翻转

最新推荐文章于 2023-07-20 10:58:52 发布

Gai8043

最新推荐文章于 2023-07-20 10:58:52 发布

阅读量401

点赞数

本文链接：https://blog.csdn.net/HuYiMin1998/article/details/114591753

版权

本文探讨了小程序中实现卡片翻转效果的技术细节，通过axml和js的结合，详细讲解了翻转动画的实现过程，帮助开发者创建交互丰富的用户体验。

摘要由CSDN通过智能技术生成

axml

<swiper style="height:{
  {moduleHeight}}rpx;">
  <swiper-item>
    <scroll-view catchTouchStart="start" catchTouchMove="move" catchTouchEnd="end">
      <!-- 多图滑动 翻转 -->
      <view style="display:flex;width:714rpx;height:{
  {moduleHeight}}rpx;background-color:{
  {moduleBgColor}};background-image:url({
  {moduleBgImage}});background-size:100% 100%;">
        <view style="width:714rpx;height:{
  {picHeight}}rpx;margin:{
  {picTop}}rpx 0 {
  {picBottom}}rpx">
          <view style="width:{
  {picWidth*picLes+(picLes-1)*picSpace}}rpx;height:{
  {picHeight}}rpx;position:relative">
            <block a:for="{
  {picArr}}">
              <view data-url="{
  {item.url}}" style="width:{
  {picWidth}}rpx;
                            height:{
  {picHeight}}rpx;
                            position:absolute;
                            left:{
  {animationArr[index].left}}rpx;
                            top:{
  {animationArr[index].top}}rpx;
                            opacity:{
  {animationArr[index].opacity}};
                            transform:rotateY({
  {animationArr[index].rotateY}}deg);
                            transform-origin:{
  {animationArr[index].origin}};
                            transition-property: left,transform,opacity,top;
                            transition-duration:{
  {animationArr[index].time}}s,{
  {animationArr[index].time}}s,{
  {animationArr[index].time}}s,{
  {animationArr[index].time}}s;
                            " onTap="onClickBaby">
                <image mode="scaleToFill" src="{
  {item.img||item.image}}" style="
                width:{
  {picWidth}}rpx;
                height:{
  {picHeight}}rpx;
                backgr