微信小程序 页面引用组件 第一个图像功能无误,第二个图像点击无法实现展开收起的功能

Question

问题描述

页面引用组件中展开收起功能,带入数据后,第一个图像没有问题,第二个图像无法正常使用,即页面引用一个组件,循环遍历数据后,第一个图像功能无误,第二个图像点击无法实现展开收起的功能

相关代码片段

微信小程序组件中使用变量show作为是否显示的标志,并放置于js文件的data中

data: {
  show: false
}

绑定godet方法,每次点击一次image图像就会取反一次show,根据show的值取不同的class类,从而达到一种类似于点击箭头展开,再次点开收起的动画效果

 <view class="go {{show ? 'show' : 'unshow' }}" bindtap="godet">
    <image class="go_icon" src="/images/arrow.png" style="width: 100rpx; height: 100rpx;"></image>
 </view>

Page页面中引用该组件

<view class="q_box" wx:for="{{card_p}}" wx:key="index">
  <quan cash="{{item.cash}}" validityTime="{{item.validityTime}}"></quan>
</view>

测试

测试增加几条数据,发现出问题的永远是最后一个

Answer 1

css加入transform: translateY(0)即可解决,但是任然不知道为什么能够解决,求回答

@keyframes unCodeShow{
  0% {
    height: 400px;
    transform: translateY(0);
  } 

  100% {
    height: 0;
    transform: translateY(0);
  }
}