{"id":752,"date":"2018-02-25T20:33:26","date_gmt":"2018-02-25T12:33:26","guid":{"rendered":"http:\/\/60.205.208.74\/2018\/02\/25\/ionic-%e6%bb%91%e5%8a%a8%e6%a1%86\/"},"modified":"2018-02-25T20:33:26","modified_gmt":"2018-02-25T12:33:26","slug":"ionic-%e6%bb%91%e5%8a%a8%e6%a1%86","status":"publish","type":"post","link":"https:\/\/www.puzi7.net\/?p=752","title":{"rendered":"ionic \u6ed1\u52a8\u6846"},"content":{"rendered":"
\n
\n

ionic \u6ed1\u52a8\u6846<\/h1>\n
\n

ion-slide-box <\/h2>\n

\u6ed1\u52a8\u6846\u662f\u4e00\u4e2a\u5305\u542b\u591a\u9875\u5bb9\u5668\u7684\u7ec4\u4ef6\uff0c\u6bcf\u9875\u6ed1\u52a8\u6216\u62d6\u52a8\u5207\u6362\uff1a<\/p>\n

\u6548\u679c\u56fe\u5982\u4e0b\uff1a<\/p>\n

<\/p>\n

\u7528\u6cd5<\/h3>\n
\n<ion-slide-box on-slide-changed=\"slideHasChanged($index)\">\n  <ion-slide>\n    <div class=\"box blue\"><h1>BLUE<\/h1><\/div>\n  <\/ion-slide>\n  <ion-slide>\n    <div class=\"box yellow\"><h1>YELLOW<\/h1><\/div>\n  <\/ion-slide>\n  <ion-slide>\n    <div class=\"box pink\"><h1>PINK<\/h1><\/div>\n  <\/ion-slide>\n<\/ion-slide-box>\n<\/pre>\n
API<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n
\u5c5e\u6027<\/th>\n\u7c7b\u578b<\/th>\n\u8be6\u60c5<\/th>\n<\/tr>\n<\/thead>\n
\n        delegate-handle<\/p>\n
(\u53ef\u9009)<\/em><\/div>\n<\/td>\n
\n
  \u5b57\u7b26\u4e32<\/code>\n      <\/td>\n
\n
\u8be5\u53e5\u67c4\u7528$ionicSlideBoxDelegate<\/code>\u6765\u6807\u8bc6\u8fd9\u4e2a\u6ed1\u52a8\u6846\u3002<\/p>\n<\/td>\n<\/tr>\n
\n        does-continue<\/p>\n
(\u53ef\u9009)<\/em><\/div>\n<\/td>\n
\n
  \u5e03\u5c14\u503c<\/code>\n      <\/td>\n
\n
\u6ed1\u52a8\u6846\u662f\u5426\u5f00\u542f\u5faa\u73af\u6eda\u52a8\u3002<\/p>\n<\/td>\n<\/tr>\n
\n        auto-play<\/p>\n
(\u53ef\u9009)<\/em><\/div>\n<\/td>\n
\n
  boolean<\/code>\n      <\/td>\n
\n
\u8bbe\u7f6e\u6ed1\u52a8\u6846\u662f\u5426\u5faa\u73af\u64ad\u653e\uff0c\u5982\u679c does-continue \u4e3a true\uff0c\u9ed8\u8ba4\u4e5f\u4e3a true\u3002<\/p>\n<\/td>\n<\/tr>\n
\n        slide-interval<\/p>\n
(\u53ef\u9009)<\/em><\/div>\n<\/td>\n
\n
  \u6570\u5b57<\/code>\n      <\/td>\n
\n
\u7b49\u5f85\u591a\u5c11\u6beb\u79d2\u5f00\u59cb\u6ed1\u52a8\uff08\u5982\u679c\u7ee7\u7eed\u5219\u4e3atrue\uff09\u3002\u9ed8\u8ba4\u4e3a4000\u3002<\/p>\n<\/td>\n<\/tr>\n
\n        show-pager<\/p>\n
(\u53ef\u9009)<\/em><\/div>\n<\/td>\n
\n
  \u5e03\u5c14\u503c<\/code>\n      <\/td>\n
\n
\u6ed1\u52a8\u6846\u7684\u9875\u9762\u662f\u5426\u663e\u793a\u3002<\/p>\n<\/td>\n<\/tr>\n
\n        pager-click<\/p>\n
(\u53ef\u9009)<\/em><\/div>\n<\/td>\n
\n
  \u8868\u8fbe\u5f0f<\/code>\n      <\/td>\n
\n
\u5f53\u70b9\u51fb\u9875\u9762\u65f6\uff0c\u89e6\u53d1\u8be5\u8868\u8fbe\u5f0f\uff08\u5982\u679cshou-pager\u4e3atrue\uff09\u3002\u4f20\u9012\u4e00\u4e2a’\u7d22\u5f15’\u53d8\u91cf\u3002<\/p>\n<\/td>\n<\/tr>\n
\n        on-slide-changed<\/p>\n
(\u53ef\u9009)<\/em><\/div>\n<\/td>\n
\n
  \u8868\u8fbe\u5f0f<\/code>\n      <\/td>\n
\n
\u5f53\u6ed1\u52a8\u65f6\uff0c\u89e6\u53d1\u8be5\u8868\u8fbe\u5f0f\u3002\u4f20\u9012\u4e00\u4e2a’\u7d22\u5f15’\u53d8\u91cf\u3002<\/p>\n<\/td>\n<\/tr>\n
\n        active-slide<\/p>\n
(\u53ef\u9009)<\/em><\/div>\n<\/td>\n
\n
  \u8868\u8fbe\u5f0f<\/code>\n      <\/td>\n
\n
\u5c06\u6a21\u578b\u7ed1\u5b9a\u5230\u5f53\u524d\u6ed1\u52a8\u6846\u3002<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\u5b9e\u4f8b<\/h2>\n
HTML \u4ee3\u7801<\/h3>\n
\n<ion-slide-box active-slide=\"myActiveSlide\">\n\u00a0\u00a0\u00a0\u00a0<ion-slide>\n\u00a0\u00a0\u00a0\u00a0  <div class=\"box blue\"><h1>BLUE<\/h1><\/div>\n\u00a0\u00a0\u00a0\u00a0<\/ion-slide>\n\u00a0\u00a0\u00a0\u00a0<ion-slide>\n\u00a0\u00a0\u00a0\u00a0  <div class=\"box yellow\"><h1>YELLOW<\/h1><\/div>\n\u00a0\u00a0\u00a0\u00a0<\/ion-slide>\n\u00a0\u00a0\u00a0\u00a0<ion-slide>\n\u00a0\u00a0\u00a0\u00a0  <div class=\"box pink\"><h1>PINK<\/h1><\/div>\n\u00a0\u00a0\u00a0\u00a0<\/ion-slide>\n<\/ion-slide-box>\n<\/pre>\n
CSS \u4ee3\u7801<\/h3>\n
\n.slider {\n  height: 100%;\n}\n.slider-slide {\n  color: #000; \n  background-color: #fff; text-align: center; \n  font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif; font-weight: 300; }\n.blue {\n  background-color: blue;\n}\n\n.yellow {\n  background-color: yellow;\n}\n\n.pink {\n  background-color: pink;\n}\n.box{ \n  height:100%; \n} \n.box h1{\n  position:relative; top:50%; transform:translateY(-50%); \n}\n<\/pre>\n
JavaScript \u4ee3\u7801<\/h3>\n
\nangular.module('ionicApp', ['ionic'])\n\n.controller('SlideController', function($scope) {\n  \n  $scope.myActiveSlide = 1;\n  \n})\n<\/pre>\n