微客导航 » 文章资讯 » 使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码

使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码

2023-09-22 20:40:05 244

废话不多说了，直接给大家贴代码了，具体代码如下所示：





用ionic(选项卡栏tab)icon(图标)ionic上拉菜单(ActionSheet)实现通讯录界面切换操作



angular.module('myApp',['ionic'])
.controller('RootCtrl',function($scope){
$scope.onControllerChanged=function(oldController,oldIndex,newController,newIndex){
console.log('Controllerchanged',oldController,oldIndex,newController,newIndex);
console.log(arguments);
};
})
.controller('HomeCtrl',function($scope,$timeout,$ionicModal,$ionicActionSheet){
$scope.items=[];
$ionicModal.fromTemplateUrl('newTask.html',function(modal){
$scope.settingsModal=modal;
});
//ionic上拉菜单(ActionSheet)
varremoveItem=function(item,button){
$ionicActionSheet.show({
buttons:[],
destructiveText:'DeleteTask',
cancelText:'Cancel',
cancel:function(){
returntrue;
},
destructiveButtonClicked:function(){
$scope.items.splice($scope.items.indexOf(item),1);
returntrue;
}
});
};
varcompleteItem=function(item,button){
item.isCompleted=true;
};
$scope.onReorder=function(el,start,end){
ionic.Utils.arrayMove($scope.items,start,end);
};
$scope.onRefresh=function(){
console.log('ONREFRESH');
$timeout(function(){
$scope.$broadcast('scroll.refreshComplete');
},1000);
}
$scope.removeItem=function(item){
removeItem(item);
};
$scope.newTask=function(){
$scope.settingsModal.show();
};
//Createtheitems
$scope.user=[
{
name:"BenSparrow",
words:"Youonyourway?"
},
{
name:"MaxLynx",
words:"Hey,it'sme."
},
{
name:"AdamBradleyson",
words:"Ishouldbuyaboat."
},
{
name:"PerryGovernor",
words:"Lookatmymukluks!"
},
{
name:"MikeHarrinqton",
words:"Thisiswickedgoodicecream."
},
];
})






Chats







{{item.name}}
{{item.words}}








Deadlines









Settings

总结

以上所述是小编给大家介绍的使用ionic(选项卡栏tab)icon(图标)ionic上拉菜单(ActionSheet)实现通讯录界面切换实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码

热门推荐

随机推荐