引入JQUERY的手指跟随滑动

灰太狼 2022-02-09 13:53 342阅读 0赞

var startX, startY, moveEndX, moveEndY, X, Y;
    var flag=true;
    $(".mui-recommend .house-content ul").on("touchstart", function(e) {
                   e.preventDefault();
                        startX = e.originalEvent.changedTouches[0].pageX;
                    });
                    $(".mui-recommend .house-content ul").on("touchmove", function(e) {
                        e.preventDefault();
                        moveEndX = e.originalEvent.changedTouches[0].pageX;
                        X = moveEndX - startX;
                        $(".mui-recommend .house-content ul").scrollLeft($(".mui-recommend .house-content ul").scrollLeft()-X);
                        flag=false;
                    });
                    $(".mui-recommend .house-content ul").on("touchend", function(e) {
                        e.preventDefault();
                        var _x_end=e.originalEvent.changedTouches[0].pageX;
                        _x_end=_x_end-startX;
                        
                        if(!flag){
                            $(".mui-recommend .house-content ul").scrollLeft(-_x_end);
                        }
                        flag=true;
                        //return false;
                    });

这是一部分，以后在继续

var startX, startY, moveEndX, moveEndY, X, Y, distanceX, moveX, maxMoveX;
    				var flag = true;
    				var ulwidth = $(".mui-recommend .house-content ul")[0].scrollWidth*1;
    				var widths=$(".mui-recommend .house-content ul").width()*1;
    				$(".mui-recommend .house-content ul").on("touchstart", function(e) {
    					e.preventDefault();
    					startX = e.originalEvent.changedTouches[0].pageX;
    					//获取刚开始的位置
    					distanceX = $($(".mui-recommend .house-content ul li")[0]).css("marginLeft");
    					distanceX = distanceX.split("p")[0];
    				});
    				$(".mui-recommend .house-content ul").on("touchmove", function(e) {
    					e.preventDefault();
    					moveEndX = e.originalEvent.changedTouches[0].pageX;
    					X = moveEndX - startX;
    					moveX = distanceX * 1 + X * 1;
    					if (moveX >= 100) {
    						moveX = 100;
    					}
    					maxMoveX = ulwidth - widths;
    					if((maxMoveX+100)<=(-moveX)){
    						moveX=-maxMoveX;
    					}
    					if (maxMoveX > 0) {
    						$($(".mui-recommend .house-content ul li")[0]).css({
    							marginLeft: moveX
    						})
    					}
    					flag = false;
    				});
    				$(".mui-recommend .house-content ul").on("touchend", function(e) {
    					e.preventDefault();
    					var _x_end = e.originalEvent.changedTouches[0].pageX;
    					_x_end = _x_end - startX;
    					moveX = distanceX * 1 + _x_end * 1;
    					if (moveX >= 25) {
    						moveX = 0;
    					}
    					if((maxMoveX+100)<=(-moveX)){
    						moveX=-maxMoveX;
    					}
    					if (!flag) {
    						if (maxMoveX > 0) {
    							$($(".mui-recommend .house-content ul li")[0]).css({
    								marginLeft: moveX
    							})
    						}
    					}
    					flag = true;
    					//return false;
    				});

这是优化的，但是回弹效果不好！

这是解决mui在上拉刷新，下拉加载中 横向移动不能滑动的解决方案;

但是在内部想触发跳转就必须用事件必须绑定在 $(".mui-recommend .house-content ul")的子元素，注意不是孙子元素，而是子元素！

var sliperstartX, startY, slipermoveEndX, moveEndY, sliperX, Y, sliperdistanceX, slipermoveX, slipermaxMoveX;
    	var sliperwidth = $(".img")[0].clientWidth * 1 - 90; //宽度
    	var widthn = $(".img ul")[0].clientWidth * 1; //内容的宽度
    	slipermaxMoveX = widthn - sliperwidth;
    	mui('.img').on('dragstart', 'ul', function(e) {
    		//$(this).css('transform', 'translate3d(' + newtrans + 'px, 0px, 0px) translateZ(0px)')
    		e.stopPropagation();
    		//获取刚开始的位置
    		sliperstartX = e.detail.center.x;
    		//  ul向左偏移为负,右为正
    		sliperdistanceX = $(".img ul")[0].style.transform.split(",")[0].split("(")[1].split("p")[0] * 1;
    	});
    	//拖动中
    	mui('.img').on('drag', 'ul', function(e) {
    		e.stopPropagation();
    		sliperX = e.detail.center.x;
    		slipermoveX = sliperdistanceX + sliperX * 1 - sliperstartX * 1;
    
    		$(this).css('transform', 'translate3d(' + slipermoveX + 'px, 0px, 0px) translateZ(0px)')
    	});
    	//拖动结束
    	mui('.img').on('dragend', 'ul', function(e) {
    		e.stopPropagation();
    		var _x_end = e.detail.center.x;
    		slipermoveEndX = sliperdistanceX + _x_end * 1 - sliperstartX * 1;
    		//$(this).css('transform', 'translate3d(' + slipermoveEndX + 'px, 0px, 0px) translateZ(0px)')
    		if (slipermoveEndX > 0) {
    			$(this).css('transform', 'translate3d( 0px, 0px, 0px) translateZ(0px)');
    			$(this).css('transitionDuration', '0.2s');
    		} else if (slipermoveEndX <= (-slipermaxMoveX+90)) {
    			$(this).css('transform', 'translate3d( ' + (-slipermaxMoveX + 90) + 'px, 0px, 0px) translateZ(0px)');
    			$(this).css('transitionDuration', '0.2s');
    		} else {
    			$(this).css('transform', 'translate3d(' + slipermoveEndX + 'px, 0px, 0px) translateZ(0px)')
    		}
    	});