使用ionic切换页面卡顿的解决方法

使用ionic开发app的时候，会发现切换页面的动画会卡顿，并不流畅，为了保证用户体验，大部分人会使用禁用动画的方法$ionicConfigProvider.views.transition('no');，但并不是最好的解决思路，cordova提供了native transitions可以让页面切换近乎原型的体验。主要步骤如下：

1、npm install ionic-native-transitions --save 下载该文件，并放入www/lib文件夹下

2、在index.html中加入<script src="lib/ionic-native-transitions/dist/ionic-native-transitions.min.js"></script>

2、cordova plugin add cordvoa-plugin-NativePageTransitions安装该插件

3、在app.js中引入'ionic-native-transitions'配置如下信息并禁用$ionicConfigProvider.views.transition('no');

$ionicNativeTransitionsProvider.setDefaultOptions({
 duration: 400, // in milliseconds (ms), default 400,
 slowdownfactor: 4, // overlap views (higher number is more) or no overlap (1), default 4
 iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1
 androiddelay: -1, // same as above but for Android, default -1
 winphonedelay: -1, // same as above but for Windows Phone, default -1,
 fixedPixelsTop: 0, // the number of pixels of your fixed header, default 0 (iOS and Android)
 fixedPixelsBottom: 0, // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
 triggerTransitionEvent: '$ionicView.afterEnter', // internal ionic-native-transitions option
 backInOppositeDirection: false // Takes over default back transition and state back transition to use the opposite direction transition to go back
});

这样在打包成的app里，切面切换的效果会比ionic自带的要流畅不少；

注意：页面切换的方向，后退<ion-nav-back-button>默认是左往右，其他则是右往左，有时候你可能并不用<ion-nav-back-button>这个标签，而是使用<ion-nav-bar>该标签，后退加自定义的东西，这时后退是按右往左，那怎样左往右了，用$rootScope.$ionicGoBack();就可以，而不要使用$ionicHistory.goBack();之后的后退方法。

更多的可以看下这个地址

https://github.com/shprink/ionic-native-transitions

以上所述是小编给大家介绍的使用ionic切换页面卡顿的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 如何解决IONIC页面底部被遮住无法向上滚动问题

    Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择. ionic 特点 1.ionic 基于Angular语法,简单易学.[3] 2.ionic 是一个轻量级框架. 3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVVM ,代

  • Ionic2系列之使用DeepLinker实现指定页面URL

    Ionic2使用了近似原生App的页面导航方式,并不支持Angular2的路由.这种方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面就有点问题了,这种情况下Angular2的router可以提供更灵活的配置.比如在首页是一个Tabs页面的情况下,如何控制用户看到的第一项Tab?默认情况下都是会导航到第一个Tab,而且地址栏的URL并不会跟随页面的切换而变化.好在Ionic2提供了一种类似路由的DeepLinker功能,可以实现以上目的. DeepLinker与NavControl

  • Ionic实现页面下拉刷新(ion-refresher）功能代码

    Ionic实现页面下拉刷新(ion-refresher）功能代码

    在平常做项目时下拉刷新功能非常常见,那么大家都是怎么实现的呢?下面小编给大家介绍如何使用Ionic实现页面下拉刷新(ion-refresher功能,一起看看看吧! 具体的实现请看下面的源码: HTML 代码 ion-refresher : 即为下拉刷新的图标: pulling-text="下拉刷新" 这里的问题可以随意更换,喜欢就好: on-refresh="doRefresh()" 这个便是当下拉的时候我们要执行的方法,这里便是刷新页面的数据. <body

  • 使用ionic切换页面卡顿的解决方法

    使用ionic开发app的时候,会发现切换页面的动画会卡顿,并不流畅,为了保证用户体验,大部分人会使用禁用动画的方法$ionicConfigProvider.views.transition('no');,但并不是最好的解决思路,cordova提供了native transitions可以让页面切换近乎原型的体验.主要步骤如下: 1.npm install ionic-native-transitions --save 下载该文件,并放入www/lib文件夹下 2.在index.html中加入<

  • vue渲染大量数据时卡顿卡死解决方法

    vue渲染大量数据时卡顿卡死解决方法

    目录 1. 问题描述 2. 常见的解决方案 3. 解决方案流程图 4. 代码 1. 问题描述 由于业务需求,需要在一个页面中点击查询按钮时加载出所有的数据,但数据量有近10万条,渲染出现卡顿,页面卡死. 2. 常见的解决方案 - 自定义中间层 自定义nodejs中间层,获取并拆分这10w条数据, 前端对接nodejs中间层,而不是服务器 缺点:成本高 - 虚拟列表 只渲染可视区域DOM,其他隐藏区域不显示,只用div撑起高度,随着浏览器滚动,创建和销毁DOM. 虚拟列表实现起来非常复杂,可借用第

  • 浅谈pycharm出现卡顿的解决方法

    使用pycharm时常出现   the IDE is running low on memory 的问题,表示pycharm这款IDE使用内存不足,需要在系统内存充足的情况下扩充IDE memory. 首先,打开File -> Appearance ->Windows Options -> 选中show memmory indicator -> OK 右下角会出现  左边数字为已使用IDE memory,右边数字为总共的IDE memory,初始为750M,如果pycharm出现卡

  • element table 数据量大页面卡顿的解决

    element table 数据量大页面卡顿的解决

    目录 element table数据量大页面卡顿 调用接口 table组件 data里使用到的数据 el-table大数据量渲染卡顿的一种思路 思路 滚动监听 slider element table数据量大页面卡顿 table显示医院列表,这里后台未做分页,总共数据大约8000条. 一次性全部赋值给table整个页面都会卡顿好几秒. 查看了请求接口到数据返回的时间为192ms,可以接受. 应该是页面渲染的问题. 这边就在前端做了分页处理. 调用接口 // 获取医院列表 getHospitalL

  • RecyclerView嵌套RecyclerView滑动卡顿的解决方法

    RecyclerView嵌套RecyclerView滑动卡顿的解决方法

    Android 利用RecyclerView仿淘宝订单页面实现,解决RecyclerView嵌套RecyclerView滑动卡顿 问题: 最近在项目中碰到一个问题,类似于淘宝订单页面,由于每个订单项中可能会包含多个具体的项目,要想实现这种效果,一般来说需要在RecyclerView中嵌套RecyclerView,这样做会导致,如果订单项中的具体项目过多,超过一屏,展示效果会有卡顿现象,原因就是由于两个RecyclerView的存在,使得滑动的view滑出当前屏幕的释放存在冲突 思路: 参照 An

  • 解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题

    说明 之前有一个angular项目,页面上表单不算多,也就一百来个(这个不固定,有的地方多,有的地方少),但是再输入的时候会造成输入延迟,反应不灵敏,对用户体验极其不好.还有一个功能就是拖拽功能(原生,没有使用官方中的拖拽功能),从左边拖到右边区域,拖拽区域少的时候还挺流畅,但一旦有几百上千的时候反应极其的慢 原因(?) 上面两个问题其实都和angular的机制有关.一个双向绑定一个拖拽归根结底都是因为angular的变化检测 angular的双向绑定主要是脏数据检查,如果大量的检查,效率比较低

  • JS时间分片技术解决长任务导致的页面卡顿

    JS时间分片技术解决长任务导致的页面卡顿

    目录 起因 处理办法 事件循环 浏览器渲染时机 原始代码 代码 效果 函数改造 代码 效果 优化时间分片 代码 效果 对比优化前后 代码 效果 最后 起因 同事遇到一个动画展示的问题,就是下面要执行一个运算量很大的函数,他要加载一个 loading,但他发现把 loading 的元素 display: block; 页面中也不会立刻出现 loading 动画,出现动画的时候是运算函数执行完毕之后. 处理办法 有两种方法去处理这种耗时任务,第一种就是 webWorker,但是一些 dom 的操作做

  • el-table嵌套el-popover处理卡顿的解决

    el-table嵌套el-popover处理卡顿的解决

    目录 罪魁祸首 解决方法 罪魁祸首 一个常见的场景是在表格行内以el-popover的形式对行内信息进行一些业务操作.在表格分页10条.20条的情况下页面运行良好,但是在分页400条的时候会出现肉眼可见的卡顿.原因是表格渲染的popover组件太多了,一行如果至少3个popover组件,那么400行至少就得渲染1200个了.下面就是导致卡顿的通常写法: <el-table-column label="操作"> <template #default="{ ro

  • antd的select下拉框因为数据量太大造成卡顿的解决方式

    相信用过antd的同学基本都用过select下拉框了,这个组件数据量少的时候很好用,但是当数据量大的时候,比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了,卡的我怀疑人生,一点用户体验都没有了. 当然这不是我想去优化它的动力,主要是公司业务人员和后端的同事也无法忍受,于是我只能屈从于他们的淫威.... 想要优化肯定要知道为什么会卡,初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿,于是想要不卡只能限制渲染的数据数量. 我的想法是这样的:任何时候都只渲染前100条数据以保证

  • Angular2监听页面大小变化的解决方法

    一.现象 全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化 二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngOnInit方法中): ngOnInit() { // 页面监听 Observable.fromEvent(window, 'resize') .debounceTime(100) // 以免频繁处理 .subscribe((event) => { // 这里处理页面变化时的操作 console.lo

随机推荐