{"id":743,"date":"2018-02-25T20:33:19","date_gmt":"2018-02-25T12:33:19","guid":{"rendered":"http:\/\/60.205.208.74\/2018\/02\/25\/ionic-%e5%88%97%e8%a1%a8%e6%93%8d%e4%bd%9c\/"},"modified":"2018-02-25T20:33:19","modified_gmt":"2018-02-25T12:33:19","slug":"ionic-%e5%88%97%e8%a1%a8%e6%93%8d%e4%bd%9c","status":"publish","type":"post","link":"https:\/\/www.puzi7.net\/?p=743","title":{"rendered":"ionic \u5217\u8868\u64cd\u4f5c"},"content":{"rendered":"<span itemprop=\"description\"><div class=\"article-body\">\n<div class=\"article-intro\" id=\"content\">\n<h1>ionic \u5217\u8868\u64cd\u4f5c<\/h1>\n<p>\u5217\u8868\u662f\u4e00\u4e2a\u5e94\u7528\u5e7f\u6cdb\u5728\u51e0\u4e4e\u6240\u6709\u79fb\u52a8app\u4e2d\u7684\u754c\u9762\u5143\u7d20\u3002ionList \u548c ionItem \u8fd9\u4e24\u4e2a\u6307\u4ee4\u8fd8\u652f\u6301\u591a\u79cd\u591a\u6837\u7684\u4ea4\u4e92\u6a21\u5f0f\uff0c\u6bd4\u5982\u79fb\u9664\u5176\u4e2d\u7684\u67d0\u4e00\u9879\uff0c\u62d6\u52a8\u91cd\u65b0\u6392\u5e8f\uff0c\u6ed1\u52a8\u7f16\u8f91\u7b49\u7b49\u3002<\/p>\n<h3>\u7528\u6cd5<\/h3>\n<pre>\n&lt;ion-list&gt;\n  &lt;ion-item ng-repeat=\"item in items\"&gt;\n    Hello, {{item}}!\n  &lt;\/ion-item&gt;\n&lt;\/ion-list&gt;\n<\/pre>\n<h3>\u9ad8\u7ea7\u7528\u6cd5: \u7f29\u7565\u56fe\uff0c\u5220\u9664\u6309\u94ae\uff0c\u91cd\u65b0\u6392\u5e8f\uff0c\u6ed1\u52a8<\/h3>\n<pre>\n&lt;ion-list ng-controller=\"MyCtrl\"\n          show-delete=\"shouldShowDelete\"\n          show-reorder=\"shouldShowReorder\"\n          can-swipe=\"listCanSwipe\"&gt;\n  &lt;ion-item ng-repeat=\"item in items\"\n            class=\"item-thumbnail-left\"&gt;\n\n    &lt;img ng-src=\"{{item.img}}\"&gt;\n    &lt;h2&gt;{{item.title}}&lt;\/h2&gt;\n    &lt;p&gt;{{item.description}}&lt;\/p&gt;\n    &lt;ion-option-button class=\"button-positive\"\n                       ng-click=\"share(item)\"&gt;\n      \u5206\u4eab\n    &lt;\/ion-option-button&gt;\n    &lt;ion-option-button class=\"button-info\"\n                       ng-click=\"edit(item)\"&gt;\n      \u7f16\u8f91\n    &lt;\/ion-option-button&gt;\n    &lt;ion-delete-button class=\"ion-minus-circled\"\n                       ng-click=\"items.splice($index, 1)\"&gt;\n    &lt;\/ion-delete-button&gt;\n    &lt;ion-reorder-button class=\"ion-navicon\"\n                        on-reorder=\"reorderItem(item, $fromIndex, $toIndex)\"&gt;\n    &lt;\/ion-reorder-button&gt;\n\n  &lt;\/ion-item&gt;\n&lt;\/ion-list&gt;\n<\/pre>\n<h3>API<\/h3>\n<table class=\"reference\">\n<thead>\n<tr>\n<th>\u5c5e\u6027<\/th>\n<th>\u7c7b\u578b<\/th>\n<th>\u8be6\u60c5<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n        delegate-handle<\/p>\n<div><em>(\u53ef\u9009)<\/em><\/div>\n<\/td>\n<td>\n<p>  <code>\u5b57\u7b26\u4e32<\/code>\n      <\/td>\n<td>\n<p>\u8be5\u53e5\u67c4\u5b9a\u4e49\u5e26\u6709<code>$ionicListDelegate<\/code>\u7684\u5217\u8868\u3002<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n        show-delete<\/p>\n<div><em>(\u53ef\u9009)<\/em><\/div>\n<\/td>\n<td>\n<p>  <code>\u5e03\u5c14\u503c<\/code>\n      <\/td>\n<td>\n<p>\u5217\u8868\u9879\u7684\u5220\u9664\u6309\u94ae\u5f53\u524d\u662f\u663e\u793a\u8fd8\u662f\u9690\u85cf\u3002<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n        show-reorder<\/p>\n<div><em>(\u53ef\u9009)<\/em><\/div>\n<\/td>\n<td>\n<p>  <code>\u5e03\u5c14\u503c<\/code>\n      <\/td>\n<td>\n<p>\u5217\u8868\u9879\u7684\u6392\u5e8f\u6309\u94ae\u5f53\u524d\u662f\u663e\u793a\u8fd8\u662f\u9690\u85cf\u3002<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n        can-swipe<\/p>\n<div><em>(\u53ef\u9009)<\/em><\/div>\n<\/td>\n<td>\n<p>  <code>\u5e03\u5c14\u503c<\/code>\n      <\/td>\n<td>\n<p>\u5217\u8868\u9879\u662f\u5426\u88ab\u5141\u8bb8\u6ed1\u52a8\u663e\u793a\u9009\u9879\u6309\u94ae\u3002\u9ed8\u8ba4\uff1atrue\u3002<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>\u5b9e\u4f8b<\/h2>\n<h3>HTML \u4ee3\u7801\uff1a<\/h3>\n<pre>\n&lt;html ng-app=\"ionicApp\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"&gt;\n    &lt;title&gt;Ionic List Directive&lt;\/title&gt;\n   \n    &lt;link href=\"http:\/\/www.runoob.com\/static\/ionic\/css\/ionic.min.css\" rel=\"stylesheet\"&gt;\n    &lt;script src=\"http:\/\/www.runoob.com\/static\/ionic\/js\/ionic.bundle.min.js\"&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n\n  &lt;body ng-controller=\"MyCtrl\"&gt;\n    \n    &lt;ion-header-bar class=\"bar-positive\"&gt;\n      &lt;div class=\"buttons\"&gt;\n        &lt;button class=\"button button-icon icon ion-ios-minus-outline\"\n          ng-click=\"data.showDelete = !data.showDelete; data.showReorder = false\"&gt;&lt;\/button&gt;\n      &lt;\/div&gt;\n      &lt;h1 class=\"title\"&gt;Ionic Delete\/Option Buttons&lt;\/h1&gt;\n      &lt;div class=\"buttons\"&gt;\n        &lt;button class=\"button\" ng-click=\"data.showDelete = false; data.showReorder = !data.showReorder\"&gt;\n            Reorder\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/ion-header-bar&gt;\n\n    &lt;ion-content&gt;\n\n      &lt;!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists --&gt;\n      \n      &lt;ion-list show-delete=\"data.showDelete\" show-reorder=\"data.showReorder\"&gt;\n\n        &lt;ion-item ng-repeat=\"item in items\" \n                  item=\"item\"\n                  href=\"#\/item\/{{item.id}}\" class=\"item-remove-animate\"&gt;\n          Item {{ item.id }}\n          &lt;ion-delete-button class=\"ion-minus-circled\" \n                             ng-click=\"onItemDelete(item)\"&gt;\n          &lt;\/ion-delete-button&gt;\n          &lt;ion-option-button class=\"button-assertive\"\n                             ng-click=\"edit(item)\"&gt;\n            Edit\n          &lt;\/ion-option-button&gt;\n          &lt;ion-option-button class=\"button-calm\"\n                             ng-click=\"share(item)\"&gt;\n            Share\n          &lt;\/ion-option-button&gt;\n          &lt;ion-reorder-button class=\"ion-navicon\" on-reorder=\"moveItem(item, $fromIndex, $toIndex)\"&gt;&lt;\/ion-reorder-button&gt;\n        &lt;\/ion-item&gt;\n\n      &lt;\/ion-list&gt;\n\n    &lt;\/ion-content&gt;\n      \n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<h3>CSS \u4ee3\u7801<\/h3>\n<pre>\nbody {\n  cursor: url('http:\/\/www.runoob.com\/try\/demo_source\/finger.png'), auto;\n}\n<\/pre>\n<h3>JavaScript \u4ee3\u7801<\/h3>\n<pre>\nangular.module('ionicApp', ['ionic'])\n\n.controller('MyCtrl', function($scope) {\n  \n  $scope.data = {\n    showDelete: false\n  };\n  \n  $scope.edit = function(item) {\n    alert('Edit Item: ' + item.id);\n  };\n  $scope.share = function(item) {\n    alert('Share Item: ' + item.id);\n  };\n  \n  $scope.moveItem = function(item, fromIndex, toIndex) {\n    $scope.items.splice(fromIndex, 1);\n    $scope.items.splice(toIndex, 0, item);\n  };\n  \n  $scope.onItemDelete = function(item) {\n    $scope.items.splice($scope.items.indexOf(item), 1);\n  };\n  \n  $scope.items = [\n    { id: 0 },\n    { id: 1 },\n    { id: 2 },\n    { id: 3 },\n    { id: 4 },\n    { id: 5 },\n    { id: 6 },\n    { id: 7 },\n    { id: 8 },\n    { id: 9 },\n    { id: 10 },\n    { id: 11 },\n    { id: 12 },\n    { id: 13 },\n    { id: 14 },\n    { id: 15 },\n    { id: 16 },\n    { id: 17 },\n    { id: 18 },\n    { id: 19 },\n    { id: 20 },\n    { id: 21 },\n    { id: 22 },\n    { id: 23 },\n    { id: 24 },\n    { id: 25 },\n    { id: 26 },\n    { id: 27 },\n    { id: 28 },\n    { id: 29 },\n    { id: 30 },\n    { id: 31 },\n    { id: 32 },\n    { id: 33 },\n    { id: 34 },\n    { id: 35 },\n    { id: 36 },\n    { id: 37 },\n    { id: 38 },\n    { id: 39 },\n    { id: 40 },\n    { id: 41 },\n    { id: 42 },\n    { id: 43 },\n    { id: 44 },\n    { id: 45 },\n    { id: 46 },\n    { id: 47 },\n    { id: 48 },\n    { id: 49 },\n    { id: 50 }\n  ];\n  \n});\n<\/pre>\n<p><a href=\"\/try\/tryit.php?filename=ionic_ion-list\" target=\"_blank\"><button class=\"btn example-btn\">\u5c1d\u8bd5\u4e00\u4e0b \u00bb<\/button><\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<span>","protected":false},"excerpt":{"rendered":"<p class=\"excerpt\"><span itemprop=\"description\">ionic \u5217\u8868\u64cd\u4f5c \u5217\u8868\u662f\u4e00\u4e2a\u5e94\u7528\u5e7f\u6cdb\u5728\u51e0\u4e4e\u6240\u6709\u79fb\u52a8app\u4e2d\u7684\u754c\u9762\u5143\u7d20\u3002ionList &hellip;<\/span><\/p>\n<p class=\"more-link-p btn-align-right\"><a class=\"green zoom-btn\" href=\"https:\/\/www.puzi7.net\/?p=743\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,26],"tags":[43,72,73,93],"class_list":["post-743","post","type-post","status-publish","format-standard","hentry","category-hybrid","category-mobile","tag-angular","tag-hybrid","tag-ionic","tag-mobile","zoom-theme-has-thumb"],"_links":{"self":[{"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/posts\/743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=743"}],"version-history":[{"count":0,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/posts\/743\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.puzi7.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}