菜鸟教程小白 发表于 2022-12-11 19:59:28

ios - 无法在 Ionic 1.3.0 iOS App 中水平滚动


                                            <p><p>我的 Cordova/Ionic (v1.3.0) 应用程序主要包含一个为复杂表单构建 HTML 的 JQuery 应用程序。同一个 JQuery 应用程序用于为 Web 浏览器构建复杂的表单,只有少数地方插入了特定于移动设备的代码。 </p>

<p>我现在尝试在垂直滚动表单中设置一个水平滚动的表格部分(表单本身不会水平滚动,只是表格部分)。水平滚动部分适用于计算机上的 Safari/Chrome/Firefox、iOS 上的 Safari 和我们的 Cordova/Ionic 应用程序的 Android 版本,但它不能在 iOS 应用程序中水平滚动。 </p>

<p>我根据这些 SO 问题和文档(<a href="https://stackoverflow.com/questions/30351672/how-to-make-an-ionic-content-scroll" rel="noreferrer noopener nofollow">q1</a>、<a href="https://stackoverflow.com/questions/37230979/ionic-content-not-scrolling" rel="noreferrer noopener nofollow">q2</a>、<a href="https://forum.ionicframework.com/t/horizontal-scroll-not-working-in-ios-10/63608" rel="noreferrer noopener nofollow">q3</a>、<a href="http://ionicframework.com/docs/v1/api/directive/ionContent/" rel="noreferrer noopener nofollow">q4</a>)尝试了各种修复,其中我将其从 <code><div/></code> 更改为 <code><ion-content/></code> 并添加 <code>overflow-scroll="true"direction="xy"delegate-handle="tableGroup"</code> 属性并调用 <code>$ionicScrollDelegate。 $getByHandle('tableGroup').resize()</code> 加载 JQuery 应用程序后但没有任何效果。我还尝试使用基于 <a href="https://stackoverflow.com/questions/15928000/horizontal-scroll-on-a-webpage-not-working-in-ios" rel="noreferrer noopener nofollow">this question</a> 的 TinyScrollbar但加载不正确。所以我尝试了很多方向,但没有得到任何地方。有什么建议吗?</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>我实际上是自己想出来的。我在 Ionic 页面上的容器中放置了几个简单滚动元素的变体,并且 <code><ion-scroll/></code> 起作用了。然后我尝试将其放入带有委托(delegate)句柄 <code>sectionScroll</code> 的 JQuery 应用程序中,并在 JQuery 应用程序加载后调用 <code>$ionicScrollDelegate.$getByHandle('sectionScroll').resize();</code>但是得到一个控制台警告说它找不到任何名为 <code>sectionScroll</code> 的东西,我应该把它放在 <code>$timeout()</code> 中。我试过了,但它仍然没有用。然后我意识到,由于 <code><ion-scroll/></code> 是一个 Angular 指令,它是作为使用 JQuery 插入到 Ionic 应用程序中的长模板字符串的一部分创建的,因此它需要由 Angular 编译才能被识别如下:</p>

<pre><code>let toCompile = angular.element(&#39;#formContent&#39;);
let linkFn = $compile(toCompile);
linkFn($scope);
$ionicScrollDelegate.$getByHandle(&#39;sectionScroll&#39;).resize();
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于ios - 无法在 Ionic 1.3.0 iOS App 中水平滚动,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/44811752/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/44811752/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: ios - 无法在 Ionic 1.3.0 iOS App 中水平滚动