引入JQUERY的手指跟随滑动

最新推荐文章于 2021-09-13 10:54:20 发布

xxm0720

最新推荐文章于 2021-09-13 10:54:20 发布

阅读量477

点赞数

分类专栏： js mui 文章标签： touch 移动端

本文链接：https://blog.csdn.net/xxm0720/article/details/89787514

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

mui

6 篇文章 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)')
		}
	});