h5 360图 环视图实现思路

多张图或者更多的图片切换实现效果 github.com/AblerSong/c…

思路1:canvas绘制,采用二维数组,支持图片叠加绘制, 优先加载当前图片, 且支持设置最大并发数量, 使用纯js编写, 已放在GitHub上

    // SYCycleImage(id, config)
    let imgObj = new SYCycleImage("cycle-image-wrap", { width: 360, height: 233, dpi: 2, maxThread: 6 })
    // updateImages(data) 
    // data: string[] | string[][]  
    // [img1,img2,...,img35,...] or [[imgA1,imgA2,...,imgA35,...],[imgB1,imgB2,...,imgB35,...]]   
    imgObj.updateImages([data])
    // imgObj.destroy()

思路2:通过修改图片css的 display: none;

    var app = new Vue({
        el: '#app',
        data: {
            arr: data,
            startPoint: 0, // 看图起点
            distance: 1, // 移动距离
            curDeg: 0, // 图片序号
        },
        methods: {
            touchstart(e) {
                // 点击开始
                this.startPoint = e.touches[0].clientX;
                e.preventDefault();
            },
            touchmove(e) {
                // 移动手指
                var tempPoint = e.touches[0].clientX;
                if (tempPoint - this.startPoint > this.distance) {
                    this.drawImg("right");
                    this.startPoint = tempPoint;
                } else if (tempPoint - this.startPoint < -this.distance) {
                    this.drawImg("left");
                    this.startPoint = tempPoint;
                }
                e.preventDefault();
            },
            drawImg(type) {
                // 修改图片序号
                if (type == "right") {
                    if (this.curDeg > 0) {
                        this.curDeg--;
                    } else {
                        this.curDeg = data.length - 1;
                    }
                } else if (type == "left") {

                    if (this.curDeg < data.length - 1) {
                        this.curDeg++;
                    } else {
                        this.curDeg = 0;
                    }
                }
            },
        },
    })