Question

我在离子内容中有以下列表：

  <ul class="list">
          <li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
            <div class="dr-info-wrapper">
              <img src="img/icons/ic_persona.png">
              <section class="dr-info">
                <h3>{{doctor.name}}</h3>
                <h4 class="institution">{{doctor.institutions[0].name}}</h4>
                <h4 class="address">{{doctor.institutions[0].address}}</h4>
                <h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
              </section>
              <span class="ion-ios-information-outline info-icon"></span>
            </div>
          </li>
        </ul>

我只需要滚动列表，因为我在其中有其他元素，我需要它们是静态/固定的（没有滚动）。这就是视图现在的样子：

红色部分不能移动/不滚动蓝色部分是我想要的部分滚动，感谢您的帮助！

以下是完整html的代码：

<ion-view id="doctors" view-title="Directorio médico" ng-controller="DoctorsDirController">
  <ion-content class="content-dir-medico" scroll="false">
    <div class="top-wrapper">
      <section class="section-for-bg-img"></section>
      <div class="dir-medico-grid-bg-img"></div>
      <section ng-class="blurOptionsWrapper ? 'options-wrapper-blurred' : 'options-wrapper'">
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                    CITIES FIELD
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div class="all-suboption">
          <div class="description-and-dropdown-wrapper first">
            <h4 ng-class="cityClicked ? 'mark-used' : 'mark-unused'">{{cityName}}</h4>

            <div class="buttons">
              <button class="button button-icon ion-ios-arrow-down" ng-disabled="blurOptionsWrapper"
                      ng-click="citiesPopover.show($event)">
                <script id="popoverCities.html" type="text/ng-template">
                  <ion-popover-view>
                    <ion-content>
                      <div class="list">
                        <ul>
                          <li class="item" ng-repeat="city in cities | orderBy: 'id'" ng-click="cityClick(city)">
                            {{city.name}}
                          </li>
                        </ul>
                      </div>
                    </ion-content>
                  </ion-popover-view>
                </script>
              </button>
            </div>
          </div>
        </div>
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                              SPECIALTIES FIELD
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div ng-class="disableSpecialty ? 'disabled-suboption' : 'suboption'" class="all-suboption">
          <div class="description-and-dropdown-wrapper">
            <h4 ng-class="specialtyClicked ? 'mark-used' : 'mark-unused'">{{specialtyName}}</h4>

            <div class="buttons">
              <button class="button button-icon ion-ios-arrow-down"
                      ng-disabled="disableSpecialty || blurOptionsWrapper"
                      ng-click="specialtiesPopover.show($event)">
                <script id="popoverSpecialties.html" type="text/ng-template">
                  <ion-popover-view>
                    <ion-content>
                      <div class="list">
                        <ul>
                          <li class="item" ng-repeat="specialty in specialties | orderBy: 'label'"
                              ng-click="specialtyClick(specialty)">
                            {{specialty.name}}
                          </li>
                        </ul>
                      </div>
                    </ion-content>
                  </ion-popover-view>
                </script>
              </button>
            </div>
          </div>
        </div>
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                              INSTITUTIONS FIELD
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div ng-class="disableInstitutions ? 'disabled-suboption' : 'suboption'" class="all-suboption">
          <div class="description-and-dropdown-wrapper last">
            <h4 ng-class="institutionClicked ? 'mark-used' : 'mark-unused'">{{institutionName}}</h4>

            <div class="buttons">
              <button class="button button-icon ion-ios-arrow-down"
                      ng-disabled="disableInstitutions || blurOptionsWrapper"
                      ng-click="institutionsPopover.show($event)">
                <script id="popoverInstitutions.html" type="text/ng-template">
                  <ion-popover-view>
                    <ion-content>
                      <div class="list">
                        <ul>
                          <li class="item" ng-repeat="institution in institutions | orderBy: 'name' | unique: 'name'"
                              ng-click="institutionClick(institution)">
                            {{institution.name}}
                          </li>
                        </ul>
                      </div>
                    </ion-content>
                  </ion-popover-view>
                </script>
              </button>
            </div>
          </div>
        </div>
      </section>

    </div>
    <section class="search-instructions" ng-hide="hideSearchInstructions">
      <img src="img/icons/ic_lupaesfera.png" class="search-icon">
      <h4>Comienza buscando </br>por ciudad y especialidad</h4>
    </section>
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            RESULTS SHOW ALL DOCTORS, BASED ON CITY & SPECIALTY
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <section class="results-area" ng-hide="hideDoctorsResults">
      <div class="filter-results-info">
        <h5>{{doctors.length}} resultados</h5>
        <h6>Filtra resultados seleccionando una institución</h6>
      </div>
        <ul class="list">
          <li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
            <div class="dr-info-wrapper">
              <img src="img/icons/ic_persona.png">
              <section class="dr-info">
                <h3>{{doctor.name}}</h3>
                <h4 class="institution">{{doctor.institutions[0].name}}</h4>
                <h4 class="address">{{doctor.institutions[0].address}}</h4>
                <h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
              </section>
              <span class="ion-ios-information-outline info-icon"></span>
            </div>
          </li>
        </ul>
    </section>

Answer 1

我刚刚使用了涵盖<ul class="list">的另一个离子内容，它解决了我的问题

<ion-content>里面的列表不能垂直滚动

1 个答案: