专栏首页娱乐心理测试vue 界面在苹果手机上滑动点击事件等卡顿解决方案

vue 界面在苹果手机上滑动点击事件等卡顿解决方案

用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,(1).滑动页面卡顿,(2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟。

一.滑动页面卡顿

//页面布局
<template>
  <div class='content'>
    页面内容
  </div>
</template>

在对应的组件的最外层div上加上这样的样式:

.content{
    -webkit-overflow-scrolling: touch;
    }

-webkit-overflow-scrolling: touch;这句代码最好可在公共的样式中添加,防止很多页面都需要写的麻烦。这句代码虽然可以解决滑动不流畅的问题,但是可能会引起几个小问题:

(1).在滑动界面之中使用的position:fixed 无法固定下来,会随着界面进行一起滚动

解决方法:将使用的position:fixed(头部导航)写在滑动部位外部,在使用绝对定位进行布局,以此解决问题

(2).vue中使用v-if导致的界面第一次无法滑动

解决方法:将v-if改成v-show进行展示,解决界面进入之后不能滑动的问题

二.点击事件响应缓慢

(1).安装fastclick (npm install fastclick -S)

(2).在main.js中设置方法

import FastClick from 'fastclick'
 
FastClick.attach(document.body);

在引入fastclick之后,虽然页面事件快了很多,但是会有一个副作用:input输入框需要连续点击两次或者长按才能获取焦点,真是到处是坑啊! 解决方法:在main.js中添加下面的代码

FastClick.prototype.focus = function(targetElement) {
 
  var length;
 
// Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
 
  if (deviceIsIOS&& targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
 
    length = targetElement.value.length;
 
    targetElement.focus();
 
    targetElement.setSelectionRange(length, length);
 
  } else {
 
    targetElement.focus();
 
}
 
};

完美解决问题!不知道还有多少未知坑等着填补,遇一坑天一坑!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • axios发送两次请求及遇到的坑

    在以前的Vue项目商城中,使用axios组件做数据请求,在页面交互中发现会发送两次网络请求,因为没有造成什么影响,一直也没有追究原因。在一个新的项目中,需要加入...

    honey缘木鱼
  • 使用Charles抓包并篡改返回数据

    honey缘木鱼
  • 小程序——带参返回上一页几种方法

    honey缘木鱼
  • 一起撸个简单粗暴的Tv应用主界面的网格布局控件(下)

    上一篇中我们已经一起学了怎么简单粗暴的撸个支持动态布局的网格控件出来,但在上一篇的介绍中,并没有学习实现网格控件的滑动效果,所以本篇就来讲讲,要如何让我们的网格...

    请叫我大苏
  • 【剑指offer:最长不含重复字符的子字符串】滑动窗口(双指针)+优化改进思路

    题目描述:请从字符串中找出一个最长的不包含重复字符的子字符串,计算该最长子字符串的长度。

    心谭博客
  • linux设置目录权限命令

    sudo chmod 600 ××× (只有所有者有读和写的权限) sudo chmod 644 ××× (所有者有读和写的权限,组用户只有读的权限) ...

    NateHuang
  • 一文教会你数据库性能调优

    前言 微软工程师的一个工程师曾经对性能调优有一个非常形象的比喻:剥洋葱 。我也非常认可,让我们来一层一层拨开外面它神秘的面纱。 ? 六大因素 下面祭出的是我们在...

    企鹅号小编
  • 2018中国创投行业白皮书:拐点之年,破局之道

    曾经高举高打、空前膨胀的一级市场要迎来一次全面的自我审视。在这个拐点之年,一级市场野蛮生长的时代已经式微,资本洗牌,开启炼金时代,投资机构摒弃野蛮生长的状态,进...

    钱塘数据
  • docker搭建私有仓库

    序言 黄金指,一不小心就弄出一个故障。。。好可怕好可怕,我的小心脏。。。我的小心眼。。。 我这么信任你,你居然欺骗我。。。。****,这么大的坑,填不满啊。。。...

    企鹅号小编
  • jquery 手风琴效果

    <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-eq...

    用户5760343

扫码关注云+社区

领取腾讯云代金券