微信小程序翻页效果

项目地址:https://gitee.com/httpchc320321/mini-card.git

简介

1.利用touch事件判断左滑右滑
2.左滑(下一张)时,删除卡片集合第一项(当前页),并将删除的内容放到卡片集合末尾,添加相应动画过度
3.右滑(上一张)时,删除卡片集合末尾项(最后一页),并将删除的内容放到卡片集合第一项,添加相应动画过度
4.判断是否滑到最后一张(第一张),给出提示

效果图

1.gif

wxml

<view class='container'>
    <view class='card_wrap'>
        <view class='card_item' bindtouchstart='touchstart' bindtouchend="touchend" animation="{{id === 0 ? animationData : ''}}" wx:for='{{cardInfoList}}' wx:key="unique" wx:for-index="id" wx:for-item="item">
            <view class='card-container'>{{item.name}}</view>
        </view>
    </view>
</view>

js

//index.js
//获取应用实例
const app = getApp()

Page({
    data: {
        nowPgae:1,
        startX:0,
        slider:false,
        animationData:{},
        cardInfoList: [{ name: 1}, { name: 2}, { name: 3}, { name: 4}]
    },
    touchstart(e){
        this.setData({
            startX: e.changedTouches[0].clientX,
        })
    },
    touchend(e) {
        let that=this;
        let startX = this.data.startX;
        let endX = e.changedTouches[0].clientX;
        if (this.data.slider)return;

        // 下一页(左滑距离大于30)
        if (startX - endX > 30){
            this.setData({
                slider: true
            });
            //尾页(当前页 等于 总页数)
            if (this.data.nowPgae == this.data.cardInfoList.length){
                this.setData({
                    slider: false
                });
                wx.showToast({title: '已经是最后一张了',icon:'none'});
                return;
            };

            //创建动画   5s将位置移动到-150%,-150%
            let animation = wx.createAnimation({
                duration: 500,
            });
            animation.translateX('-150%').translateY('-150%').rotate(60).step();
            this.setData({
                animationData: animation.export()
            });

            // 移动完成后
            setTimeout(function(){
                var cardInfoList = that.data.cardInfoList;
                var slidethis = that.data.cardInfoList.shift(); //删除数组第一项
                that.data.cardInfoList.push(slidethis); //将第一项放到末尾
                //创建动画   将位置归位
                let animation = wx.createAnimation({
                    duration: 0,
                });
                animation.translateX('-53%').translateY('-50%').rotate(0).step();

                that.setData({
                    cardInfoList: that.data.cardInfoList,
                    animationData: animation.export(),
                    slider:false,
                    nowPgae:that.data.nowPgae+1
                });
            },500)
        }

        // 上一页
        if (endX-startX  > 30){
            this.setData({
                slider: true
            })
            //首页
            if (this.data.nowPgae == 1) {
                this.setData({
                    slider: false
                })
                wx.showToast({title: '已经到第一张了',icon: 'none'})
                return;
            };

            //创建动画  移动到-150%,-150%
            let animation = wx.createAnimation({
                duration: 0,
            });
            animation.translateX('-150%').translateY('-150%').rotate(100).step();


            var cardInfoList = that.data.cardInfoList;
           
            var slidethis = that.data.cardInfoList.pop(); //删除数组末尾项
            that.data.cardInfoList.unshift(slidethis);//将删除的末尾项放到第一项
            that.setData({
                animationData: animation.export(),
                cardInfoList: that.data.cardInfoList,
            });
            
            setTimeout(function(){
                //创建动画   5s将位置移动到原位
                let animation2 = wx.createAnimation({
                    duration: 500,
                    // timingFunction: 'cubic-bezier(.8,.1,.2,0.8)',
                });
                animation2.translateX('-53%').translateY('-50%').rotate(0).step();
                that.setData({
                    animationData: animation2.export()
                });
                that.setData({
                    slider: false,
                    nowPgae: that.data.nowPgae - 1
                });
            },50)
        }
    },
    onLoad: function() {},
})

wxss

page {
    height: 100%;
}

.container {
    height: 100%;
}

.card_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f2f2f6;
}

.card_wrap .card_item {
    position: absolute;
    width: 80%;
    height: 85%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 30rpx;
    background: #fff;
    border: 2rpx solid #eee;
    border-radius: 20rpx;
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 5, 1);
}

.card_item:nth-child(1) {
    z-index: 4;
    transform: translateX(-53%) translateY(-50%);
}

.card_item:nth-child(2) {
    z-index: 3;
    transform: translateX(-53%) translateY(-50%);
}

.card_item:nth-child(3) {
    z-index: 2;
    transform: translateX(-50%) translateY(-51%);
}

.card_item:nth-child(4) {
    z-index: 1;
    transform: translateX(-47%) translateY(-52%);
}

.card-container {
    width: 100%;
    height: 100%;
}