云服务器 199 / 年,新老同享,开发者力荐特惠渠道
阿里云推广

微信小程序页面滑动事件

  • 内容
  • 评论
  • 相关

需求:

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

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

图片2.png

图片3.png图片4.png图片5.png

然后再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,方便短时间内再次检测到滑动,销毁定时器,让图片不在伸缩出来。

 

 

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:微信小程序页面滑动事件 - https://wlphp.com/?post=376

发表评论

电子邮件地址不会被公开。 必填项已用*标注