用的是uniapp的swiper组件 关闭了衔接滑动
有个功能是 当第一题和最后一题再次滑动的时候要给出提示像这样

image.png

image.png

我当即想到的是给swiper加上tochstart 和tochend时间 (触碰开始和触碰结束)

image.png

然后在touchend时间里面去判断下标 是第一个还是最后一个给出提示
但是 有bug
当第二页滑动到第一页的时候 他就会给出 提示了
当第倒数第二页滑动到倒数第一页的时候 他就会给出 提示了

解决思路

想到在第一页滑动或者最后一页滑动触碰开始和触碰结束是同一个数据
那我把触碰开始的当前数据放进一个数组 触碰结束后的当前数据也放进一个数据 然后进行比较不就行了

这里也存储了触碰开始和结尾的坐标值

数据

data() {
        return {
            list: [
                { title: '第一个页面' },
                { title: '第二个页面' },
                { title: '第三个页面' },
                { title: '第四个页面' },
                { title: '第五个页面' }
            ], //渲染数据
            listIndex: 0, //下标
            subX: '', //起点
            subXs: '', //结束
            arr: [] //用来判断触碰开始和结尾的数据
        };
    },

给组件绑定事件和数据

下标绑定
change事件
@touchstart 触碰开始事件
@touchend 触碰结束事件

image.png

js

//swiper-item改变事件
        change(e) {
            this.listIndex = e.detail.current;
        },
        //触碰开始
        touchstart(e) {
            this.subX = e.changedTouches[0].clientX;
            this.arr[0] = this.list[this.listIndex];
            console.log(this.arr[0]);
        },
        //触碰结束
        touchend(e) {
            this.subXs = e.changedTouches[0].clientX;
            this.arr[1] = this.list[this.listIndex];
            //this.suX !==this.subXs 这里主要是判断点击事件  因为要用到答题页面去的 所以不能阻止默认事件
            if (this.arr[0] === this.list[0] &&this.arr[0] === this.arr[1] &&this.subX !== this.subXs
            ) {
                uni.showToast({
                    title: '已经是第一题了'
                });
            } else if (this.arr[0] === this.list[this.list.length - 1] &&this.arr[0] === this.arr[1] &&this.subX !== this.subXs
            ) {
                uni.showToast({
                    title: '已经是最后一题了'
                });
            }
        },

触碰结束有个判断条件是 判断触碰开始和触碰结束是不是相等 如果是相等那就是用户点击了
因为这个swiper要用到答题页面上去的 要点击选项 所有不能阻止默认行为否则点击事件就失效了