【问题标题】:Disabling vertical scroll on ion-scroll inside ion-list when swiping滑动时在 ion-list 内的 ion-scroll 上禁用垂直滚动
【发布时间】:2015-04-28 03:01:31
【问题描述】:

我在将 ion-scroll 包装到 ion-list 时遇到了一点问题。

这是我的代码:

    <ion-content>

      <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->

      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
 <ion-scroll style="height: 300px" >
        <ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}" class="item-remove-animate">
          Item {{ item.id }}
          <ion-delete-button class="ion-minus-circled" 
                             ng-click="onItemDelete(item)">
          </ion-delete-button>
          <ion-option-button class="button-assertive"
                             ng-click="edit(item)">
            Edit
          </ion-option-button>
          <ion-option-button class="button-calm"
                             ng-click="share(item)">
            Share
          </ion-option-button>
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>
</ions-scroll>
      </ion-list>

    </ion-content>

http://codepen.io/anon/pen/yNyjGx

我想要的是防止在 ion-item 上滑动时滚动,默认值是有效的,但是当我尝试包装它时,它不起作用,你能帮我一些替代方案吗?

问题是我想用 css 调整 ion-list 的高度,所以我在 ion-list 中使用了 ion scroll

【问题讨论】:

    标签: cordova mobile ionic-framework ionic


    【解决方案1】:

    以下是该问题的简化解决方案。移除 ion-scroll 并赋予 ion-content 高度。

    CodePen Here

    <ion-content style='height : 300px'> 
    

    【讨论】:

    • 您也可以通过将scroll="false" 添加到 ion-content 标签:&lt;ion-content scroll="false"&gt; 来禁用离子滚动而不是删除它。
    【解决方案2】:

    在 ion-content 中使用 has-bouncing="false"

       <ion-content has-bouncing="false">
    
      <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
    
      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
          <ion-scroll style="height: 300px" >
        <ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}" class="item-remove-animate">
          Item {{ item.id }}
          <ion-delete-button class="ion-minus-circled" 
                             ng-click="onItemDelete(item)">
          </ion-delete-button>
          <ion-option-button class="button-assertive"
                             ng-click="edit(item)">
            Edit
          </ion-option-button>
          <ion-option-button class="button-calm"
                             ng-click="share(item)">
            Share
          </ion-option-button>
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>
       </ions-scroll>
      </ion-list>
     </ion-content>
    

    【讨论】:

    • 如果你有侧边菜单或者有什么 has-bouncing="false" 会做
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-02-12
    • 2016-04-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-04
    • 1970-01-01
    相关资源
    最近更新 更多