Question

我需要在页面上有一个固定元素，然后是一个可滚动的列表。

我在第一个离子含量中添加了离子含量。但它不会滚动。

<ion-view title="Bayonne" hide-back-button="true" id="page5" style="background-color:#1B463C;">
<ion-content scroll="true" padding="false" class="has-header">
    <div>
        <img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
    </div>
    <div id="bayonne-button-bar1" class=" button-bar ">
        <button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive  button-block buttonnomargin">Lieux</button>
        <a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark  button-block buttonnomargin">Circuits</a>
    </div>
   <ion-content id="contentInside">
            <ion-list id="bayonne-list2">
                <ion-item class="item-thumbnail-left  " id="bayonne-list-item12" ui-sref="rempart">
                    <img src="img/S6OgBxiMQdSttmcgQNFJ_old.png">
                    <h2>Parc de la Poterne</h2>
                </ion-item>
                <ion-item class="item-thumbnail-left  " id="bayonne-list-item11" ui-sref="rempart">
                    <img src="img/0CoPf6OkTGWKNa0SUvI1_rempart.jpg">
                    <h2>Parc de la Poterne</h2>
                </ion-item>
                <ion-item class="item-thumbnail-left item-icon-right  " id="bayonne-list-item7">
                    <img src="img/St3jeK3kRVC7bY3TODRt_tour.png">
                    <h2>Château-Vieux</h2>
                    <i class="icon ion-android-walk"></i>
                </ion-item>
                <ion-item class="item-thumbnail-left  " id="bayonne-list-item13">
                    <img src="img/1E4YdOePR62V8ZoECOuL_cloitre.jpg">
                    <h2>Cloître</h2>
                </ion-item>
                <ion-item class="item-thumbnail-left  " id="bayonne-list-item5">
                    <img src="img/sDFRnANETvaagk5B01nZ_bayonne_cathedrale_et_cloitre_03-05-2012___11.JPG">
                    <h2>Cathédrale</h2>
                </ion-item>
                <ion-item class="item-thumbnail-left  " id="bayonne-list-item6">
                    <img src="img/n3OwTRCOTDSW1V7q2Z3R_reduit.jpg">
                    <h2>Place du Réduit</h2>
                </ion-item>
                <ion-item class="item-thumbnail-left  " id="bayonne-list-item14">
                    <img src="img/qeuF4erGTQOtqvgTUOD1_escalier.jpg">
                    <h2>Escaliers</h2>
                </ion-item>
            </ion-list>

    </ion-content>
</ion-content>

Answer 1

你不能在另一种离子含量中含有离子含量，这不是一个好习惯。如果您希望内容是静态的，可以将ion-header与subheader类一起使用。

<ion-header class="bar bar-subheader">
<div>
    <img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div id="bayonne-button-bar1" class=" button-bar ">
    <button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive  button-block buttonnomargin">Lieux</button>
    <a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark  button-block buttonnomargin">Circuits</a>
</div>

现在图片和按钮在标题中将是静态的。注意：必须在离子内容中包含has-subheader类。

<ion-content class="has-subheader">
      "Your content goes here"
</ion-content>

离子含量内的离子含量scroll-false不会滚动

1 个答案: