小程序-源碼實(shí)現(xiàn)3D層疊輪播圖

發(fā)表時(shí)間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：57

Tips：

此文如果對(duì)您有幫助，希望 客官 您可以施舍個(gè) 贊 或 評(píng)論，讓更多的人看到。

Demo的由來：

1、小程序里無法使用swiper.js插件
2、網(wǎng)上搜索關(guān)于小程序?qū)盈B輪播，但得到的結(jié)果達(dá)不到想要的效果

Demo源碼：

demo.wxml

<!--輪播圖輔助線-->
<view class="line">
    <view class="line2"></view>
</view>
<!--輪播圖本體-->
<view class="selection_cards" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
    <view class="selection_cards_item" wx:for="{{list}}" wx:key="index"
        style="left:{{item.style.left}}px; z-index:{{item.style.zIndex}};transform:{{item.style.transform}};opacity:{{item.style.opacity}};transition:{{!isTouch?'0.1s':0}};">
        {{item.option}}
    </view>
</view>
復(fù)制代碼

demo.wxss

/*輪播圖輔助線，css*/
.line{
    width: 100%;
    height: 420rpx;
    border: 1rpx solid red;
    position: fixed;
    left: 0;
    top: 434rpx;
    z-index: 0;
}
.line2{
    width: 213rpx;
    height: 420rpx;
    /* border: 1rpx solid red; */
    border-left: 1rpx solid red;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    z-index: 0;
}

/*層疊輪播選牌，css*/
.selection_cards{
    width: 100%;
    height: 400rpx;
    position: relative;
    margin-top: 200px;
    z-index: 99;
}

.selection_cards_item{
    width: 194rpx;/*188*/
    height:350rpx;/*340*/
    background:green;
    background-size: 100%;
    /* overflow: hidden; */
    border-radius: 16rpx;
    position: absolute;
    top: 0;
    color: white;
    font-size: 100rpx;
    box-sizing: border-box;
    border: 4rpx solid black;
}
復(fù)制代碼

demo.js

Page({
    data: {
        cardNumber: 7, //牌的數(shù)量
        indexArr: [-3, -2, -1, 0, 1, 2, 3], //牌的坐標(biāo)，0就是最中間那個(gè)
        list: [], //用于渲染的列表
        listArr: [], //用來備份初始化后的list數(shù)組
        startPageX: 0, //按下觸摸時(shí)的位置
        cardWidth: 0, //牌在當(dāng)前設(shè)備下的真實(shí)寬度
        screenWidth: 0, //當(dāng)前設(shè)備的真實(shí)寬度
        isTouch: false, //當(dāng)前是否為觸摸狀態(tài)
    },
    onLoad() {
        let _this = this;
        _this.init();
    },
    /*層疊輪播圖初始化*/
    init: function () {
        let _this = this;
        wx.getSystemInfo({
            success(res) {
                //獲取屏幕的寬成功
                let arr = [];
                let len = _this.data.cardNumber;
                let cardWidth = res.screenWidth / 750 * 194;

                for (let i = 0; i < len; i++) {
                    let item = {
                        option: 0, //自定義選項(xiàng)
                        left: (i * (cardWidth / 2)),
                        scale: (3 - Math.abs(_this.data.indexArr[i])) * 0.4,
                        zIndex: 3 - Math.abs(_this.data.indexArr[i]),
                        style: {
                            left: (i * (cardWidth / 2)),
                            transition: 0,
                            zIndex: 3 - Math.abs(_this.data.indexArr[i]),
                            transform: "scale(" + ((3 - Math.abs(_this.data.indexArr[i])) * 0.4) + ")",
                            opacity: (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0
                        }
                    }
                    item.option = i;
                    arr.push(item);
                }
                console.log(arr);

                _this.setData({
                    screenWidth: res.screenWidth,
                    cardWidth,
                    list: arr,
                    listArr: arr
                })
            }
        })
    },
    /*觸摸開始*/
    touchstart(e) {

        //console.log(e.changedTouches[0].pageX);
        this.setData({
            startPageX: e.changedTouches[0].pageX,
            isTouch: true //開始觸摸
        });

    },
    /*觸摸移動(dòng)*/
    touchmove(e) {
        let _this = this;
        let pageX = e.changedTouches[0].pageX;
        let move = pageX - _this.data.startPageX; //正數(shù)，向右滑動(dòng)；負(fù)數(shù)，向左滑動(dòng)
        let list = JSON.parse(JSON.stringify(_this.data.list));
        let len = list.length;
        //console.log(move);
        if (move > 0) { //向右滑

            for (let i = 0; i < len; i++) {
                list[i].style.left = list[i].left + ((move) * 0.52);
                if (_this.data.indexArr[i] < 0) {
                    //牌的顯示順序，從左往右邊看。左邊的牌,不包括中間的牌
                    list[i].style.transform = "scale(" + (list[i].scale + (move * 0.005)) + ")";
                    list[i].style.zIndex = list[i].zIndex + 1;
                    if (_this.data.indexArr[i] >= -3) {
                        list[i].style.opacity = 1; //把最左邊的牌顯示
                    }
                } else {
                    //右邊的牌,包括中間的牌
                    list[i].style.transform = "scale(" + (list[i].scale - (move * 0.005)) + ")";
                    list[i].style.zIndex = list[i].zIndex - 1;
                    if (_this.data.indexArr[i] >= 2) {
                        list[i].style.opacity = 0;//把最右邊的牌關(guān)閉
                    }
                }
            }
            //檢查是否，翻了一張牌，向右
            if (list[2].style.left >= list[3].left) {
                //console.log('翻牌了');
                let newArr = [];
                for (let i = 0; i < len; i++) {
                    let index = i; //當(dāng)前將要變成哪一個(gè)坐標(biāo)元素的位置
                    if (i + 1 != len) {
                        index = i + 1;
                    } else {
                        //最后一個(gè)元素到第一個(gè)元素的位置
                        index = 0;
                    }
                    let current_option = list[i].option;
                    // console.log('current_option',current_option);
                    // console.log('list[i].option',list[i].option);
                    let item = _this.data.listArr[index];
                    item.option = current_option;
                    newArr[index] = item;
                }
                // console.log('old', list);
                // console.log('new', newArr);
                list = newArr;
                _this.setData({
                    startPageX: pageX
                });
            }
            _this.setData({
                list
            })

        } else { //向左滑
            for (let i = 0; i < len; i++) {
                list[i].style.left = list[i].left + ((move) * 0.52);
                if (_this.data.indexArr[i] <= 0) {
                    //左邊的牌,包括中間的牌
                    list[i].style.transform = "scale(" + (list[i].scale - Math.abs(move * 0.005)) + ")";
                    list[i].style.zIndex = list[i].zIndex - 1;
                    if (_this.data.indexArr[i] <= -2) {
                        list[i].style.opacity = 0; //把最左邊的牌消失
                    }

                } else {
                    //右邊的牌,不包括中間的牌
                    list[i].style.transform = "scale(" + (list[i].scale + Math.abs(move * 0.005)) + ")";
                    list[i].style.zIndex = list[i].zIndex + 1;
                    if (_this.data.indexArr[i] >= 2) {
                        list[i].style.opacity = 1; //把最右邊的牌顯示
                    }
                }
            }

            //檢查是否，翻了一張牌，向左
            if (list[3].style.left <= list[2].left) {

                //console.log('翻牌了');
                let newArr = [];
                for (let i = 0; i < len; i++) {
                    let index = i; //當(dāng)前將要變成哪一個(gè)坐標(biāo)元素的位置
                    if (i == 0) {
                        index = len - 1;
                    } else {
                        //最后一個(gè)元素到第一個(gè)元素的位置
                        index = i - 1;
                    }

                    let current_option = list[i].option;
                    // console.log('current_option',current_option);
                    // console.log('list[i].option',list[i].option);
                    let item = _this.data.listArr[index];
                    item.option = current_option;
                    newArr[index] = item;
                }
                // console.log('old', list);
                // console.log('new', newArr);
                list = newArr;
                _this.setData({
                    startPageX: pageX
                });
            }

            _this.setData({
                list
            })

        }
    },
    /*觸摸結(jié)束*/
    touchend(e) {

        console.log('觸摸結(jié)束');
        let _this = this;
        let list = JSON.parse(JSON.stringify(_this.data.list));
        let len = list.length;
        _this.setData({
            isTouch: false //關(guān)閉觸摸
        })
        if (list[2].style.left >= list[3].left||list[3].style.left <= list[2].left) {
            //console.log('翻牌了');
            
        } else {
            //移動(dòng)的距離不夠，不用翻牌
            for (let i = 0; i < len; i++) {
                list[i].style.left = list[i].left;
                list[i].style.zIndex = list[i].zIndex;
                list[i].style.transform = "scale(" + list[i].scale + ")";
                list[i].style.opacity = (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0
            }
            _this.setData({
                list
            })
        }
    }
})