h5页面上下左右滑动

Posted 2023-05-05

参考技术A var startX = 0,

    startY = 0,

    operate = 0;

backDom.addEventListener('touchstart', function(evt)

evt.preventDefault();

var touch = evt.touches[0], //获取第一个触点

            x = Number(touch.pageX), //页面触点X坐标

            y = Number(touch.pageY); //页面触点Y坐标

    //记录触点初始位置

    startX = x;

    startY = y;

    );

backDom.addEventListener('touchmove', function(evt)

var touch = evt.touches[0], //获取第一个触点

            x = Number(touch.pageX), //页面触点X坐标

            y = Number(touch.pageY); //页面触点Y坐标

    //判断滑动方向

            if (y - startY>0)

                //console.log('下滑了！');

                operate = 1;

           

    );

backDom.addEventListener('touchend', function()

if(operate == 1)

inviteDom.style.top = "100%"

inviteLetterBackwardDom.style.bottom = "-100%"

      inviteLetterForwardDom.style.bottom = "-100%"



    );

H5页面切换，左右滑动和上下滑动，哪种好？

左右滑动和上下滑动都是交互的形式，使用哪一种主要看应用的具体场景。
当然，也有一些需要普遍注意的地方，如：
1、苹果手机上，向右滑动容易触发返回上一级页面。所以为了交互体验，要慎用向右滑动的操作方式。
2、设置向上滑动翻页时，指引箭头应该向上而不是向下；如果是点击翻页，则用向下的箭头。
3、功能按钮等尽量远离页面的底部，以便更好地适配各种类型、各种大小的手机，防止按钮被挡住。 参考技术A 左右滑动和上下滑动都是交互的形式，使用哪一种主要看应用的具体场景。
当然，也有一些需要普遍注意的地方，如：
1、苹果手机上，向右滑动容易触发返回上一级页面。所以为了交互体验，要慎用向右滑动的操作方式。
2、设置向上滑动翻页时，指引箭头应该向上而不是向下；如果是点击翻页，则用向下的箭头。
3、功能按钮等尽量远离页面的底部，以便更好地适配各种类型、各种大小的手机，防止按钮被挡住。