记录微信小程序实现点击翻卡功能(横向180度)

最新推荐文章于 2023-04-28 01:24:05 发布

cat-rongye

最新推荐文章于 2023-04-28 01:24:05 发布

阅读量762

点赞数

文章标签：微信小程序蓝桥杯拓扑学

本文链接：https://blog.csdn.net/qq_45246017/article/details/122558997

版权


                <view  wx:for="{{cardList}}" wx:key="{{ind}}" class="card-item {{item.showcard ? 'card' : ''}}"
                    data-ind="{{index}}">
                    <view class="img-cover image" animation="{{item.animationMain}}" alt="" data-ind="{{index}}" data-id="1" bindtap="rotateFn">
                        <image src="{{base_img_url}}con01-item.png" mode="widthFix" ></image>
                    </view>
                    <view class="img-card image" animation="{{item.animationBack}}" alt=""  data-id="2"  data-ind="{{index}}"  bindtap="rotateFn">
                        <image src="{{base_img_url}}{{item.img}}" mode="widthFix" ></image>
                    </view>
                </view>

wxss及js:


        var id = e.currentTarget.dataset.id
        var index = e.currentTarget.dataset.ind
        this.animation_main = wx.createAnimation({
            duration: 400,
            timingFunction: 'linear'
        })
        this.animation_back = wx.createAnimation({
            duration: 400,
            timingFunction: 'linear'
        })
        // 点击正面
        let cardList = this.data.cardList
        if (id == 1) {
            this.animation_main.rotateY(180).step()
            this.animation_back.rotateY(0).step()
            cardList[index].animationMain = this.animation_main.export()
            cardList[index].animationBack = this.animation_back.export()
            this.setData({
                cardList: cardList
            })
        }
        // 点击背面
        else {
            //  this.animation_main.rotateY(0).step()
            //  this.animation_back.rotateY(-180).step()
            //  cardList[index].animationMain = this.animation_main.export()
            //  cardList[index].animationBack = this.animation_back.export()
            //  this.setData({
            //     cardList: cardList
            //  })
            // return false;
        }