需求：

微信小程序首页右顶部有个好物榜单，是伸开状态，当用户再首页滑动的时候，好物榜单图片就会缩回去，停止滑动过几秒又会展开状态。难点停止滑动后，再次滑动，这种中途不能展开保持一直缩回去状态。

展开和缩回去是根据变量显示不同的两个图片。

然后再index.js写三个事件处理函数：

    //滑动开始事件

    handletouchtart: function (event) {

        let app = this;

        console.log("滑动开始");

    },

    //滑动结束事件

    handletouchend: function (event) {

        let app = this;

        console.log("滑动结束");

        app.setData({

            timer1: setTimeout(function () {

                //如果当前是1，则改为0

                app.setData({

                    is_move: 0,

                })

            }, 1000),

        })

 

    },

    //滑动移动事件

    handletouchmove: function (event) {

        let app = this;

        //console.log(app.data.timer1);

        console.log("滑动中");

        if (typeof (app.data.timer1) != "undefined") {

            clearTimeout(app.data.timer1);

        }

        setTimeout(function () {

            app.setData({

                is_move: 1,

            })

        }, 1);

 

    },

 

代码解析：

滑动开始事件里面不做任何处理，滑动中的时候app.data.timer1如果存在，则清空掉定时器，然后把is_move改为1，让图片缩回去。滑动结束事件设定一个定时器，1s后把is_move改为0，让图片再伸出来。同时把定时器的返回值赋值给data里面的time1，方便短时间内再次检测到滑动，销毁定时器，让图片不在伸缩出来。