2018-07-20 23:46:05 YJD19970908 阅读数 620

移动端ios滑动卡慢的解决方案

Introduce

产品给了个h5的界面让我切。由于接口没给,就模拟了点数据,写好了静态页面。发现超出一屏,ios滑动非常的卡顿,缓慢。而安卓无问题。

Thought

预计是什么属性不兼容ios,于是各种百度,怀疑flex,等等等,折腾很久。没解决。最后问学长。学长说: 啥? 我没遇到过啊。 emmmm。

Sloution

有问题找度娘啊,发现一部分遇到了和我一样的问题。一部分人说 加上

* {
   -webkit-overflow-scrolling:touch;
}

不幸的是 没有解决,不明觉厉,继续百度。查到一种说法。

htmlbody {
    height:100%
}

会导致页面卡顿。我翻看我的代码 。还真是。。emmm,于是删掉。完美解决。ios和安卓一样效果

Review

那么问题出在哪里呢? 百度很久,都是给了解决方案,但是没有给理由。。查了会css书,也没有。。只能以后再解决了

writer&contact

Jontyy jontyy@163.com

GitHub

https://github.com/YJD199798/jontyy-textanimation.git

2018-08-23 15:10:12 lh_seckill 阅读数 401

在IOS真机运行时 , 足迹商品过多 , 页面出现滑动 , 会导致头部跟随页面滑动闪烁 , 体验极差

解决方案 :

           if(window.plus){
                plusReady();
            }else{
                document.addEventListener("plusready",plusReady,false);
            }
            function plusReady(){
                if(plus.os.name=="iOS"){ 
                    $('.mui-content').css({'height':'100%','overflow-y':'scroll'})
                }; 
            }

判断在IOS端 , 在头部后面内容盒子加上对应样式 即可解决滑动问题.

2019-04-09 11:22:47 Mangojjx 阅读数 458

最近在维护vue项目中发现一个小坑,该功能是使用scroll事件动态监听屏幕变化发送请求,来完成一个简单排名,但是功能完成后测试分别在安卓、pc端测试均正常,但是苹果手机多次刷新会出现排名混乱的问题,经过分析,终于找到解决方案啦~~~~

**

问题分析:

**
scroll事件在ios上会出现兼容问题,在屏幕滑动时会不断的给后台发送请求,再次刷新,接收到的数据会有出入,导致排名混乱。
要想解决这个问题,需要从限制发送请求入手

**

解决办法:

**
使用节流,控制请求次数,代码如下:

data(){
      params:1
      flag:true
}
methods:{
     //触发上拉加载事件
     handleScroll(){
           if (!this.flag) return
           this.load();
       }
      //上拉加载
     async load(){
           this.flag = false;
           let res = await $axios(this.params)
           if(res.data.err_msg == "success"){
                 this.flag = true
          }
      }
}

`
好了,使用节流这个问题就解决了,如有其它办法,欢迎大佬指正~~~

2012-12-20 13:11:26 wanghaiwei2012 阅读数 44

只要手指触摸屏幕,滑动,从屏幕离开,系统都会产生UIEvent对象类型的事件---当然包括UITouch事件
– touchesBegan:withEvent:   
当用户触摸到屏幕时调用方法
– touchesMoved:withEvent:  
当用户触摸到屏幕并移动时调用此方法
– touchesEnded:withEvent:  
当触摸离开屏幕时调用此方法

– touchesCancelled:withEvent:  当触摸被取消时调用此方法

 例子如下:

//滑动开始事件
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event  
{  
    UITouch *touch = [touches anyObject];  
    CGPoint pointone = [touch locationInView:self.view];//获得初始的接触点  
    self.startPoint  = pointone;  
}
//滑动移动事件
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event  
{  
    UITouch *touch = [touches anyObject];  
//imgViewTop是滑动后最后接触的View
        CGPoint pointtwo = [touch locationInView:imgViewTop];  //获得滑动后最后接触屏幕的点  
        
        if(fabs(pointtwo.x-startPoint.x)>100)
        {  //判断两点间的距离  
            bMove = YES;
        } 
}  
//滑动结束处理事件
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
        CGPoint pointtwo = [touch locationInView:self.view];  //获得滑动后最后接触屏幕的点 
        if((fabs(pointtwo.x-startPoint.x)>50)&&(bMove))
        {
            //判断点的位置关系 左滑动
            if(pointtwo.x-startPoint.x>0)
            {   //左滑动业务处理
                if (clicks>0) {
                    clicks--;
                    if ([wyKPI.sortZbs count]>1) {
                        [btnRight setEnabled:YES];
                        if(clicks==0)
                        {
                            [btnLeft setEnabled:NO];
                            [btnRight setEnabled:YES];
                        }
                        [labTitle setText:[wyKPI.sortZbs objectAtIndex:(NSUInteger)clicks]];
                        [labTitle setFont:[UIFont systemFontOfSize:14.0f]];
                        [tabWyKPI reloadData];
                    }
                }
            }
            //判断点的位置关系 右滑动
            else
            {  //右滑动业务处理
                if (clicks<[wyKPI.sortZbs count]-1) {
                    clicks++;
                    if ([wyKPI.sortZbs count]>1) {
                        [btnLeft setEnabled:YES];
                        if(clicks==[wyKPI.sortZbs count]-1)
                        {
                            [btnLeft setEnabled:YES];
                            [btnRight setEnabled:NO];
                        }
                        [labTitle setText:[wyKPI.sortZbs  objectAtIndex:clicks]];
                        [labTitle setFont:[UIFont systemFontOfSize:14.0f]];
                        [tabWyKPI reloadData];
                    }
                }
            }  
        }
}

 

2019-08-07 09:50:06 coderW 阅读数 36

添加指令

在滚动的最外层元素使用该指令

1.适用于弹窗内部不需要滚动的场景

Vue.directive('lockScrollBack', {
  update: function (el, binding, vnode) {
    if (binding.value.includes(true)) {
      el.addEventListener('touchmove', bodyScroll, false)
    } else {
      el.removeEventListener('touchmove', bodyScroll, false)
    }
  },
});


2.适用于弹窗也需要滚动的场景
通过overflow = hidden的方式解决滑动穿透,
*添加该指令的元素需要添加样式 overflow-y: auto;

Vue.directive('lockScroll', {
  update: function (el, binding, vnode) {
    if (Array.isArray(binding.value)) {
      if (binding.value.includes(true)) {
        el.style.overflow = 'hidden'
      } else {
        el.style.overflow = 'auto'
      }
    } else if (Object.prototype.toString(binding.value)=='[object Object]') {
      el.style.overflow = 'auto';
      for (let key in binding.value) {
        if (binding.value[key]) {
          el.style.overflow = 'hidden';
          break;
        }
      }
    }
  },
});

ios fixed兼容性问题

阅读数 766

没有更多推荐了,返回首页