开发者社区> 问答> 正文

求助关于移动端手指上下滑动松开后,元素会惯性滑动一点距离!!

touchMoveSliderCateList = function(x, y){
        var $list = jqueryMap.$cateListUl,
            //    获取用户手指滑动距离
            offset = {
                x : x - stateMap.touchStartPos.x,
                y : y - stateMap.touchStartPos.y
            };

        $list.css('transform', 'translate3d(0px, ' + (offset.y - Math.abs(stateMap.listOffsetTop)) + 'px, 0px)');
};

目前我是用tuchmove的最后位置减去touchstart的起始位置,得到用户手指滑动的距离,在用户移动的途中不停的设置到元素上,移动元素是没问题,但是感觉太生硬,我希望在我手指松开后,能偶惯性移动一点距离,如何做呢??

展开
收起
爵霸 2016-06-17 11:18:25 2878 0
2 条回答
写回答
取消 提交回答
  • 最好的办法尝试用原有的overflow:auto属性

    2019-07-17 19:42:15
    赞同 展开评论 打赏
  • 用手拖动ul,可以根据速度,惯性移动不同距离,超出范围了还能回弹,供参考~

    <script type="text/javascript">
            //得到各种元素
            var nav = document.querySelector("nav");
            var navul = document.querySelector("nav ul");
            var navullis = document.querySelectorAll("nav ul li");
            var navW = parseInt(window.getComputedStyle(nav , null)['width']);
    
            //宽度
            navul.style.width = navullis.length * 82 +"px";
    
            nav.addEventListener("touchstart",touchstartHandler);
            nav.addEventListener("touchmove",touchmoveHandler);
            nav.addEventListener("touchend",touchendHandler);
    
            var startX;
            var nowX = 0;
            var dX;
    
            var lastTwoPoint = [0,0];
    
            //开始滑动
            function touchstartHandler(event){
                navul.style.webkitTransition = "none";    //去掉过渡
                navul.style.transition = "none";    //去掉过渡
                startX = event.touches[0].pageX;    //记录起点
            }
    
            //滑动过程
            function touchmoveHandler(event){
                event.preventDefault();
    2019-07-17 19:42:15
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
3D动画的菜谱式灯光与云渲染 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载