ionic overflow:auto失效
生活随笔
收集整理的這篇文章主要介紹了
ionic overflow:auto失效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
事情的起因是 同事上傳一個很寬的table文件,因為手機屏幕寬度有限,因此要求 用戶可以水平滾動頁面,這樣table的內容通過滾動就可以實現啦。
當時感覺很簡單 給table外面的容器加個overflow:auto;就可以了唄;
然而,,,安卓是沒問題的,ios卻不行,死活滾動不了。
于是想到用ionic中的滾動來實現,ion-scroll;
<ion-scroll zooming="true" direction="x">
<pre class="doc" ng-bind-html="displayDocHtmlData"></pre>
</ion-scroll>
這次在安卓和蘋果上都可以水平滾動了。。。
但是,因為是從后臺讀取的數據,所以,有的內容是很長的,這個時候安卓依然沒問題,ios卻又死活上下滾動不了。。。
于是網上百度搜索,發現新的方法,不知道原理,,問題反正是解決了,不可思議。。。
1 <ion-view hide-back-button="true" cache-view="false" hide-nav-bar="true"> 2 <ion-header-bar cache-view="false" class="bar-positive header-bar"> 3 <button class="button button-clear return-btn" ng-click="goBack()"> 4 </button> 5 <h1 class="title title-center">文檔查看</h1> 6 </ion-header-bar> 7 <ion-content ng-init="init()" class="bg-color" overflow-scroll="true"> 8 <ion-scroll zooming="true" direction="xy" style="height:100%;"> 9 <pre class="doc" ng-bind-html="displayDocHtmlData"></pre> 10 </ion-scroll> 11 </ion-content> 12 </ion-view>在ion-content中加 overflow-scroll="true"
ion-scroll中加入direction="xy" style="height:100%;"?
有時間再研究下啦。
轉載于:https://www.cnblogs.com/MissBean/p/ion-scroll.html
總結
以上是生活随笔為你收集整理的ionic overflow:auto失效的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Android初级教程获取手机系统联系人
- 下一篇: An internal error oc