菜鸟教程小白 发表于 2022-12-11 20:12:30

android - Ionic 3 - 如何实现viewpager?


                                            <p><p>我目前正在使用 Ionic 3 开发应用程序,主屏幕包含 3 个选项卡 (<code>ion-tabs</code>) 我创建了一个功能来根据用户的滑动来更改选项卡,但是我的客户要求相当于 WhatsApp 的过渡,我不知道如何实现。我想过使用 <code>ion-slides</code> 但我必须将代码从 3 个选项卡迁移到单个 View ,有没有办法在不更改组件的情况下附加动画?</p>

<pre><code>&lt;ion-tabs #Tabs no-border tabsPlacement=&#34;top&#34; tabsHighlight=&#39;true&#39; color=&#34;secondary&#34; &gt;
    &lt;ion-tab =&#34;disponiveisRoot&#34; tabTitle=&#34;Disponiveis&#34; &gt;&lt;/ion-tab&gt;
    &lt;ion-tab =&#34;meusPedidosRoot&#34; tabTitle=&#34;Meus pedidos&#34; &gt;&lt;/ion-tab&gt;
    &lt;ion-tab =&#34;finalizadosRoot&#34; tabTitle=&#34;Finalizados&#34; &gt;&lt;/ion-tab&gt;
&lt;/ion-tabs&gt;
</code></pre>

<p> <a href="/image/lbV4V.png" rel="noreferrer noopener nofollow"><img src="/image/lbV4V.png" alt="enter image description here"/></a> </p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>您可以使用 <a href="https://github.com/zyra/ionic2-super-tabs" rel="noreferrer noopener nofollow">ionic2-super-tabs</a> .该库可以轻松制作可滑动的标签。您必须检查 github 页面的兼容性以及您应该使用哪个版本。 </p>

<p>使用该库,一个基本示例如下所示。它与 Ionic it self 中的标签几乎相同。</p>

<blockquote>
<p>Basic example</p>

<p>Component:</p>

<pre><code>export class MyPage {

page1: any = Page1Page;
page2: any = Page2Page;
page3: any = Page3Page;

}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;super-tabs&gt;
&lt;super-tab =&#34;page1&#34; title=&#34;First page&#34;&gt;&lt;/super-tab&gt;
&lt;super-tab =&#34;page2&#34; title=&#34;Second page&#34;&gt;&lt;/super-tab&gt;
&lt;super-tab =&#34;page3&#34; title=&#34;Third page&#34;&gt;&lt;/super-tab&gt;
&lt;/super-tabs&gt;
</code></pre>
</blockquote></p>
                                   
                                                <p style="font-size: 20px;">关于android - Ionic 3 - 如何实现viewpager?,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/50586419/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/50586419/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: android - Ionic 3 - 如何实现viewpager?