werun-wxapp/nova-werun/components/previewImg/index.js

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        previewImgList: {
            type: Array,
            value: [],
            observer: function(newVal) {
                this.initializeImgIndex();
            }
        },
        previewImg: {
            type: String,
            value: '',
            observer: function(newVal) {
                this.initializeImgIndex();
            }
        },
        previewHideStatus: {
            type: Boolean,
            value: false
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        index: 0,
        imgindex: 1,
        left: '0%',
        scaleObj: {
            scale: 1,
            x: 0,
            y: 0,
            yes: true
        },
        touchS: [],
        touchE: [],
        preview_box_top: '0%' // 初始化预览框位置
    },

    lifetimes: {
        detached: function () {
            // 在组件实例被从页面节点树移除时执行
        },
        attached: async function () {
            // 在组件实例进入页面节点树时执行
            this.initializeImgIndex();
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        initializeImgIndex: function () {
            const {
                previewImgList,
                previewImg
            } = this.properties;
            console.log(this.properties);
            if (previewImgList.length > 0 && previewImg) {
                const index = previewImgList.findIndex(img => img === previewImg);
                if (index !== -1) {
                    this.setData({
                        index: index,
                        imgindex: index + 1, // imgindex 从 1 开始
                        left: '-' + index + '00%;transition: all 0s;'
                    });
                } else {
                    // 如果没有找到，可以选择处理的逻辑，比如重置 index
                    this.setData({
                        index: 0,
                        imgindex: 1,
                        left: '0%;transition: all .5s;'
                    });
                }
            }
        },

        touchStart: function (e) {
            this.data.touchStartTime = e.timeStamp; // 时间点
            let sx = e.touches[0].pageX;
            let sy = e.touches[0].pageY;
            this.data.touchS = [sx, sy];
        },

        touchMove: function (e) {
            let start = this.data.touchS;
            let sx = e.touches[0].pageX;
            let sy = e.touches[0].pageY;
            this.data.touchE = [sx, sy];
        },

        touchEnd: function (e) {
            let start = this.data.touchS;
            let end = this.data.touchE;
            let scaleObj = this.data.scaleObj;

            if (scaleObj.yes) {
                if (end[0] === 0) {
                    console.log('点击');
                    this.jingzhi()
                } else if ((start[0] < end[0] - 50) && (scaleObj.scale === 1 && scaleObj.x === 0 && scaleObj.y === 0)) {
                    if (this.data.index > 0) {
                        this.data.index -= 1;
                        this.data.imgindex -= 1;
                        this.updateView();
                    }
                } else if ((start[0] > end[0] + 50) && (scaleObj.scale === 1 && scaleObj.x === 0 && scaleObj.y === 0)) {
                    if (this.data.index < this.data.previewImgList.length - 1) {
                        this.data.index += 1;
                        this.data.imgindex += 1;
                        this.updateView();
                    }
                } else {
                    console.log('下滑/上滑');
                    // this.jingzhi()
                }
                this.data.touchE = [0, 0];
            }

            setTimeout(() => {
                if (this.data.scaleObj.x === 0 && this.data.scaleObj.y === 0 && this.data.scaleObj.scale === 1) {
                    this.data.scaleObj.yes = true;
                }
            }, 500);
        },

        updateView: function () {
            this.setData({
                index: this.data.index,
                left: '-' + this.data.index + '00%;transition: all .5s;',
                imgindex: this.data.imgindex
            });
        },

        jingzhi: function () {
            // 处理点击事件
            console.log('点击图片');
            this.setData({
                preview_box_top: '0%',
                previewHideStatus: false ,// 点击后重新显示预览框
                previewImgList:[],
                previewImg:''
            });
        }
    }
});