小程序实现动画自定义组件

目录

效果展示

实现步骤

●新建组件
在最外层新建components文件夹

在components文件夹中新建名为AnimView的文件夹

然后在AnimView文件夹中新建Component并命名为AnimView

●代码实现
AnimView.wxml

<view class="animContainer" bindtap="startAnim">
  <view class="{{animType == 0 ?'animItemOne' : 'animItemOneClick'}}" style="transition: {{animTime}};"></view>
  <view class="{{animType == 0 ?'animItemTwo' : 'animItemTwoClick'}}" style="transition: {{animTime}};"></view>
</view>

AnimView.wxss

.animContainer{
  width: 100%;
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 默认的样式 */
.animItemOne{
  width: 90%;
  height: 100rpx;
  background-color: blue;
}
/* 点击后的样式 */
.animItemOneClick{
  width: 90%;
  height: 100rpx;
  background-color: blue;
  margin-top: 130rpx;
}
/* 默认的样式 */
.animItemTwo{
  width: 90%;
  margin-top: 30rpx;
  height: 100rpx;
  background-color: aqua;
}
/* 点击后的样式 */
.animItemTwoClick{
  width: 90%;
  margin-top: 30rpx;
  height: 100rpx;
  background-color: aqua;
  margin-top: -230rpx;
}

AnimView.js

// components/AnimView/AnimView.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 自定义属性控制动画时间
    animTime:{
      type:String,
      value:"1s"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    "animType": 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    startAnim:function(){
      console.log(this.data.animType)
      if(this.data.animType == 0){
        this.setData({
          "animType": 1
        })
      }else{
        this.setData({
          "animType": 0
        })
      }
    }
  }
})

●页面引用
这个是我新建的页面用来展示引用的自定义组件

首先我们需要在myview.json中声明组件：

{
  "usingComponents": {
    "AnimView":"/components/AnimView/AnimView"
  }
}

然后在myview.wxml中引用即可：

<!-- animTime为自定义的属性，用于控制动画时间 -->
<AnimView animTime="1s"/>