海钓视频,贝多芬的悲伤铃声,劲舞团全部歌曲
目前项目用的ionic1,采用的优化方法有以下两个:
1. 安装cordova-plugin-crosswalk-webview插件,能提升手机的运行速度
2. 如果仅仅只是装crosswalk在安卓机跑起来完全不能看,尤其在路由跳转的动画中卡顿非常严重,体验感极差.此时可以安装一个
转场动画插件com.telerik.plugins.nativepagetransitions,它的githup地址为:
用了这个插件之后路由跳转的动画便采用了原生的方式来实现了.除了安装这个插件之外,你另外还需要下载ionic-native-transitions.js这个js文件,并在首页中引入.紧接着需要在主模块appModule引入ionic-native-transitions这个模块。在app.js的.config方法中按如下配置:
我要评论
var transOption = {
duration: 250,
slowdownfactor: 10,
androiddelay: -1,
fixedPixelsTop: 0,
fixedPixelsBottom: 0,
backInOppositeDirection: false
};
var defaultTrans = {
type: 'slide',
direction: 'left'
};
var backTrans = {
type: 'slide',
direction: 'right'
};
function setAndroidTrans(){
$ionicNativeTransitionsProvider.setDefaultOptions(transOption);
$ionicNativeTransitionsProvider.setDefaultTransition(defaultTrans);
$ionicNativeTransitionsProvider.setDefaultBackTransition(backTrans);
$ionicNativeTransitionsProvider.enable(true); // Enable plugin and disable ionic transitions
}
ionic.Platform.isAndroid() setAndroidTrans() : $ionicNativeTransitionsProvider.enable(false);
但是如果你先安装了crosswalk,再安装这个插件便会发现出现问题,打包出来的app的路由动画会出现紊乱,这是因为crosswalk干扰了这个插件,所以需要在项目文件config.xml文件中加上一行配置:
<preference name="CrosswalkAnimatable" value="true" />
此时路由动画确实能跑起来,但是按返回键路由的方向出现问题,所有的动画方向全部从右往左,按返回键时路由方向应该从左
往右才对.要修正这个问题只需要将$ionicHistory.goBack()全部修改成$rootScope.$ionicGoBack()。
这样就大功告成了吗,看上去是的，打包成app之后,路由跳转起来纵享丝滑,毫无卡顿,但是如果点击页面上的input,软键盘出
现时会使页面晃动，你可以尝试一下,当把CrosswalkAnimatable的值设置为false时这个晃动就消失了,但是如果你想使用这个
插件就必须要求把它设置为true，要解决这个晃动问题可按照下面方法操作:
1.在app.js中设置ionic.Platform.isFullScreen=true，例如如下图
.config(['$stateProvider','$urlRouterProvider','$ionicConfigProvider','$provide','$httpProvider','$ionicNativeTransitionsProvider',function($stateProvider, $urlRouterProvider,$ionicConfigProvider,$provide,$httpProvider,$ionicNativeTransitionsProvider) {
$httpProvider.defaults.timeout = 8000;
$httpProvider.interceptors.push('UserInterceptor');
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('center');
/*$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');*/
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
$ionicConfigProvider.backButton.text('').icon('ion-chevron-left');
$ionicConfigProvider.backButton.previousTitleText(false);
$ionicConfigProvider.views.forwardCache(true);
$ionicConfigProvider.scrolling.jsScrolling(true);
ionic.Platform.isFullScreen = true;
var transOption = {
duration: 250,
slowdownfactor: 10,
androiddelay: -1,
fixedPixelsTop: 0,
fixedPixelsBottom: 0,
backInOppositeDirection: false
};
var defaultTrans = {
type: 'slide',
direction: 'left'
};
var backTrans = {
type: 'slide',
direction: 'right'
};
function setAndroidTrans(){
$ionicNativeTransitionsProvider.setDefaultOptions(transOption);
$ionicNativeTransitionsProvider.setDefaultTransition(defaultTrans);
$ionicNativeTransitionsProvider.setDefaultBackTransition(backTrans);
$ionicNativeTransitionsProvider.enable(true); // Enable plugin and disable ionic transitions
}
ionic.Platform.isAndroid() setAndroidTrans() : $ionicNativeTransitionsProvider.enable(false);
}])
2.编辑platforms/android/AndroidManifest文件第一处值修改为
3.在app.js中移除cordova.plugins.Keyboard.disableScroll(true);
如果你不想在tab页面切换也有动画,路由可这样配置:
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "html/tabs.html"
})
.state('tabs.product', {
url: "/product",
nativeTransitions: null,
views: {
'product-tab': {
templateUrl: "html/productAndBrand.html",
controller: 'productAndBrandCtrl',
}
}
})
.state('tabs.homepage', {
url: "/homepage",
nativeTransitions: null,
views: {
'aftersale-tab': {
templateUrl: 'html/homepage.html',
controller: 'homepageCtrl'
}
}
})
//资讯页面
.state('tabs.information', {
url: "/information",
nativeTransitions: null,
views: {
'info-tab': {
templateUrl: 'html/information.html',
controller: 'informationCtrl'
}
}
})
.state('intro', {//引导页
url: "/intro",
templateUrl: "html/intro.html",
controller: 'introCtrl'
});
tab下子页面的路由也要添加上nativeTransition:null,那么tabs之间的切换便无动画.但是项目有些地方会设置嵌套路由,嵌套路由页面跳转时希望不要整个页面做动画滑动,而仅仅只需要子路由的视图部分做转场动画就行了,但这个效果ionic的路由已经做好了.所以我们可以采用以下方法动态控制采用ionic路由动画还是插件的路由动画.
$ionicNativeTransitions.enable(true);//采用插件动画,关闭ionic动画
$ionicNativeTransitions.enable(false);//采用ionic动画,关闭插件动画
至此大功告成,在市面上600块钱的安卓机上跑起来也很流畅,再也没有以前无法忍受的感觉了.
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能
网友评论