一,側滑效果
主要涉及到三個地方
1,選單頁面
主要分為主頁面和側滑頁面兩部分,又分別都包含頂部bar和主要內容部分
} 0">}
在配置頁面記得,通過選單內容頁面的name,把選單和選單內容頁關聯起來
對於選單頁,設定的abstract: true,暫時作用是不可以跳轉到此頁面(即不可以跳轉到menu.html)
angular.module('todo.io', ['ionic', 'todo.io.directives', 'todo.io.filters', 'todo.io.services', 'todo.io.controllers', 'nspopover','localstoragemodule','ngcordova'])
.run(function($ionicplatform)
if(window.statusbar)
});}).config(function($stateprovider, $urlrouterprovider) )
.state('sign', )
abstract: true,
templateurl: "templates/menu.html",
})//通過選單內容頁面的name,把選單和選單內容頁關聯起來
url: "/todolist/:groupid",
views: }})
url: "/todolist/edit/:groupid",
views: }})
url: "/todo/:todoid",
views: }})
url: "/group",
views: }})
url: "/group/:groupid",
views: }})
url: "/search",
views: }})
url: "/settings",
views:
}});
$urlrouterprovider.otherwise('/');
});
3,選單內容頁面主要就是關聯選單的button,設定此屬性就行menu-toggle
效果圖(電腦瀏覽器的,手機也一樣)
二,下拉重新整理
主要兩部分控制部分和頁面部分
1,頁面部分
ion-refresher重新整理控制項,on-refresh設定重新整理方法,還有下拉文字,重新整理文字,下拉效果圖
}2,控制部分
主要就是控制完成重新整理後,通知關閉重新整理效果
.controller('myctrl', function($scope, $timeout) , 1000);
};});
另外找到ionic的svg動畫效果圖,可是不知道怎麼加入
ionic 下拉重新整理的視覺友好互動小tips
乙個多月沒有寫部落格了,實在是太忙了,因為一直在趕專案,做乙個基於swoole的伺服器之間的非同步通訊和檔案傳輸的服務和api,搞得真的辛苦啊,最終搞定了,測試的整個效能還是不錯的,整個過程收穫很大,有時間在整理一下關於swoole這方面的知識 然而下面說的還是關於ionic的移動混合框架的知識 在...
ionic 下拉重新整理時觸發上拉載入事件的解決辦法
不知為何我的專案使用 ion refresher 和 ion infinite scroll的時候,出現了每次下拉重新整理的時候,都會多次觸發上拉載入控制項的事件 研究小半天最後終於找到了解決辦法 如果ion infinite scroll 的 immediate check 屬性沒有設定 那麼改為...
vant實現上拉載入下拉重新整理的效果
onload 下拉重新整理,上拉載入更多 v model searchval show action placeholder search onsearch onsearch 搜尋 div template van search primary 搜尋 van button refreshing re...