1

是否可以在 amp-carousel 中的给定索引处添加/删除幻灯片,或在多页流中的给定索引处添加/删除页面,并将幻灯片/页面绑定到选择器?

例如:

In the code below, when a region is selected, the city & city detail from that region should be visible. 如果取消选择区域 1,则属于区域 1 的所有城市都应在“城市”部分和“城市详细信息”部分中隐藏。

此外,如果取消选择某个地区并且从“城市详细信息”部分中删除了一个城市,则“下一个城市”按钮应该仍然能够链接到下一个可用的城市。

到目前为止,我的“地区”部分正在工作(隐藏/显示城市),但我希望能在“城市详细信息”部分提供一些帮助。

<!doctype html>
<html ⚡&gt;
<head>
  <meta charset="utf-8">
  <title>City Info</title>
  <link rel="canonical" href="amps.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>


  <!-- AMP Components -->
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <script async custom-element="amp-bind"src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

  <style amp-custom>
    /*** uncss> filename: https://code.getmdl.io/1.3.0/material.indigo-pink.min.css ***/
    /**
     * material-design-lite - Material Design Components in CSS, JS and HTML
     * @version v1.3.0
     * @license Apache-2.0
     * @copyright 2015 Google, Inc.
     * @link https://github.com/google/material-design-lite
     */
    html{color:rgba(0,0,0,.87)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}.hidden{display:none}@media print{*,*:before,*:after{background:transparent;color:#000;box-shadow:none}tr{page-break-inside:avoid}p{orphans:3;widows:3}}.mdl-button{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(255,255,255,0)}html{width:100%;height:100%;-ms-touch-action:manipulation;touch-action:manipulation}body{width:100%;min-height:100%}html,body{font-family:"Helvetica","Arial",sans-serif;font-size:14px;font-weight:400;line-height:20px}h5,h6,p{padding:0}h5{font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}h5,h6{font-family:"Roboto","Helvetica","Arial",sans-serif;margin:24px 0 16px}h6{font-size:16px;letter-spacing:.04em}h6,p{font-weight:400;line-height:24px}p{font-size:14px;letter-spacing:0;margin:0 0 16px}.mdl-color-text--red{color:#f44336 }.mdl-color-text--blue{color:#2196f3 }.mdl-color-text--grey{color:#9e9e9e }.mdl-color--black{background-color:#000 }.mdl-color-text--white{color:#fff }.mdl-button{background:0 0;border:none;border-radius:2px;color:#000;position:relative;height:36px;margin:0;min-width:64px;padding:0 16px;display:inline-block;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;will-change:box-shadow;transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle}.mdl-button::-moz-focus-inner{border:0}.mdl-button:hover{background-color:rgba(158,158,158,.2)}.mdl-button:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button:active{background-color:rgba(158,158,158,.4)}.mdl-button.mdl-button--colored:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button--raised{background:rgba(158,158,158,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.mdl-button--raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);background-color:rgba(158,158,158,.4)}.mdl-button--raised:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--raised.mdl-button--colored:focus:not(:active){background-color:rgb(63,81,181)}.mdl-button--fab:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--fab.mdl-button--colored:focus:not(:active){background-color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent{color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent.mdl-button--raised{color:rgb(255,255,255);background-color:rgb(255,64,129)}.mdl-button[disabled][disabled]{color:rgba(0,0,0,.26);cursor:default;background-color:transparent}.mdl-button--raised[disabled][disabled]{background-color:rgba(0,0,0,.12);color:rgba(0,0,0,.26);box-shadow:none}@supports (-webkit-appearance:none){}@supports (pointer-events:auto){}.mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgb(63,81,181)0%,rgb(63,81,181)37.5%,rgba(63,81,181,.26)37.5%,rgba(63,81,181,.26)100%);transform:scale(1)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgba(0,0,0,.12)0%,rgba(0,0,0,.12)25%,rgba(0,0,0,.26)25%,rgba(0,0,0,.26)37.5%,rgba(0,0,0,.12)37.5%,rgba(0,0,0,.12)100%);transform:scale(1)}body{margin:0}

    /* custom css */
    #header {
      height: 24px;
      padding: 16px;
      margin: 0;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 24px;
    }

    .hidden {
      display: none;
    }
    .center {
      text-align: center;
    }

    div,
    section {
      padding: 30px 50px;
    }

    .regionOptions {
      padding-top: 0;
    }

    .regionOptions p {
      text-align: center;
      font-weight: bold;
      border: 1px solid #ccc;
      box-shadow: 0 2px 2px #ccc;
      padding: 30px;
      width: 200px;
      margin-right: 20px;
      display: none;
    }

    .regionOptions p:hover,
    .regionOptions p.selectedModel {
      border-color: #62C3B1;
      box-shadow: 0 2px 2px #62C3B1;
    }

    .regionOptions p.visible {
      display: inline-block;
    }

    #regions option {
      margin-right: 10px;
    }

  	.btn {
      position:relative;
    }
  	.btn input {
      position:absolute;
      top: 0px;
    }
  	.btn span {
      font-weight: bold;
      background-color: #aaa;
      border:0px solid #000;
      border-radius: 2px;
      position: relative;
      height: 36px;
      margin: 0;
      min-width: 55px;
      padding: 0;
      padding-left: 15px;
      display: inline-block;
      font-family: "Roboto","Helvetica","Arial",sans-serif;
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0;
      overflow: hidden;
      will-change: box-shadow;
      transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
      outline: none;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      line-height: 36px;
      vertical-align: middle;
  	  color: #fff;
  	}

  	.btn input:checked + span {
      background-color: #62C3B1;
    }

    .btn input + span > span.untag {
      opacity: 0;
      background: transparent;
      padding: 0;
      font-size: 10px;
    }

    .btn input:checked + span > span.untag {
      opacity: 1;
    }

    .product-details-container {
      /* border: 5px solid red; */
    }

    /* Sliding Stepper */
    /* position details section */
    .stepper.sliding {
      position: relative;
      overflow-x: hidden;
      height: 400px;
      max-width: 1200px;
      margin: 0 auto;
      border: 3px solid green;
      padding: 0px;
    }

    /* position each detail 'page' horizontally */
    .stepper.sliding .page {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 96%;
      height: 90%;
      padding: 16px;
      transition: transform 0.25s cubic-bezier(0, 0, 0.3, 1);
    }

    /* position active page */
    .stepper.sliding .page.active {
      transform: translateX(0%);
      pointer-events: auto;
    }

    /* position all other pages */
    .stepper.sliding .page:not(.active) {
      opacity: 0.5;
      pointer-events: none;
    }

    /* animate position of prev & next pages */
    .stepper.sliding .page.next {
      transform: translateX(100%);
    }
    .stepper.sliding .page.previous {
      transform: translateX(-100%);
    }

    /* Selected MODEL */
    .regionOptions .selectedModel span {
      color: red;
    }

    .mdl-button--accent.mdl-button--accent.mdl-button--raised {
    color: black;
    background-color: transparent;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px #ccc;
    padding: 30px;
    width: 200px;
    margin: 15px;
}

.mdl-button--accent.mdl-button--accent.mdl-button--raised:hover {
  border-color: #62C3B1;
  box-shadow: 0 2px 2px #62C3B1;
}

  </style>
</head>

<body>

  <amp-state id="selected">
    <script type="application/json">
      {
        "reion1": true,
        "region2": true,
        "region3": true,
        "region4": true,
        "city": ""
      }
    </script>
  </amp-state>

  <header id="header" class="mdl-color--black mdl-color-text--white">
    <span class="mdl-color-text--blue">City</span>Info
  </header>

<div>
  <h3>Region</h3>
  <label class="btn">
    <input checked type="checkbox" value="region1" on="change:AMP.setState({selected:{region1: event.checked}})"/><span>Region 1 <span class="untag">X</span></span>
  </label>

  <label class="btn"><input checked type="checkbox" value="region2" on="change:AMP.setState({selected:{region2: event.checked}})" /><span>Region 2 <span class="untag">X</span> </span></label>

     <label class="btn"> <input checked type="checkbox" value="region3" on="change:AMP.setState({selected:{region3: event.checked}})" /><span>Region 3 <span class="untag">X</span> </span></label>

        <label class="btn"><input checked type="checkbox" value="region4" on="change:AMP.setState({selected:{region4: event.checked }})" ><span>Region 4 <span class="untag">X</span> </span></label>
</div>



 <div class="regionOptions">
  <h3>Cities</h3>

    <p [class]="selected.region1 ? 'visible' : ''" class="visible selectedModel">City A From Region 1</p>
    <p [class]="selected.region1 ? 'visible' : ''"  class="visible">City B From Region 1</p>

    <p [class]="selected.region2 ? 'visible' : ''" class=" visible">City C From Region 2</p>
    <p [class]="selected.region2 ? 'visible' : ''" class=" visible">City D From Region 2</p>

    <p [class]="selected.region3 ? 'visible' : ''" class=" visible">City E From Region 3</p>
    <p [class]="selected.region3 ? 'visible' : ''"class=" visible">City F From Region 3</p>

    <p [class]="selected.region4 ? 'visible' : ''"class=" visible">City G From Region 4</p>
    <p [class]="selected.region4 ? 'visible' : ''"class=" visible">City H From Region 4</p>

  </div>

  <div class="product-details-container">
    <h3 class="center">City Details</h3>

    <div class="stepper sliding">
      <!-- first position, active by default -->
      <section class="page active product-details" [class]="slidingStepperPage > 0 ? 'page previous' : 'page active'">
        <h3>Details: City A From Region 1</h3>

        <div>
          <button class="" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
        </div>
      </section>

      <!-- other positions -->
      <section class="page next product-details" [class]="slidingStepperPage < 1 ? 'page next' : (slidingStepperPage > 1 ? 'page previous' : 'page active')" [class]="selected.Product2FromUS ? 'active' : ''">
        <h3>Details: City B From Region 1</h3>

        <div>
          <button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
          <button class="stepper-btn " on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
        </div>
      </section>

      <section class="page next product-details" [class]="slidingStepperPage < 2 ? 'page next' : (slidingStepperPage > 2 ? 'page previous' : 'page active')">
        <h3>Details: City C From Region 2</h3>

        <div>
          <button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
          <button class="stepper-btn " on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
        </div>
      </section>

      <section class="page next product-details" [class]="slidingStepperPage < 3 ? 'page next' : (slidingStepperPage > 3 ? 'page previous' : 'page active')">
        <h3>Details: City D From Region 2</h3>

        <div>
          <button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
          <button class="stepper-btn " on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
        </div>
      </section>
      
      <section class="page next product-details" [class]="slidingStepperPage < 4 ? 'page next' : (slidingStepperPage > 4 ? 'page previous' : 'page active')">
        <h3>Details: City E From Region 3</h3>

        <div>
          <button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
          <button class="stepper-btn " on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
        </div>
      </section>
      
      <section class="page next product-details" [class]="slidingStepperPage < 5 ? 'page next' : (slidingStepperPage > 5 ? 'page previous' : 'page active')">
        <h3>Details: City F From Region 3</h3>

        <div>
          <button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
        </div>
      </section>
    </div>

  </div>


</body>
</html>

4

1 回答 1

0

我认为你应该像一条线一样重新设计轮播,而不是相互重叠。然后隐藏您需要与城市相同的方法的页面。使用类改变滑动方式:

.translateX-1 {
    transform: translateX(100%);
}
.translateX-2 {
    transform: translateX(200%);
}
.translateX-3 {
    transform: translateX(300%);
}
于 2018-03-13T06:23:24.103 回答