モバイル/デスクトップ上の要素のビューを制御するWixCode

Question

新しいWix Codeオンライン開発IDEを学習しており、モバイルまたはデスクトップ上のアイテムの表示を制御する方法を理解したいと考えています。私はこれにどのようにアプローチすべきですか？

Answer 1

モバイルからのものを隠そうとしている場合は、モバイルエディタで要素の非表示ボタンをクリックすると簡単に操作できます。

しかし、あなたはカスタム動作を必要とするので、あなたがWixCodeについて尋ねていると仮定すると：

フォーム・ファクタAPIをチェック https://www.wix.com/code/reference/wix-window.html#formFactor とプロパティパネル https://support.wix.com/en/article/working-with-the-properties-panel-6441151

あなたが設定しますどこのプロパティパネルがあります要素のデフォルトの可視性。 次に、そのAPIを使用してformFactorを確認してください。 最後に、$ w（ '＃elementname）.show（）またはhide（）を使用して可視性を変更します。

あなただけのデスクトップ対携帯に表示される内容を制御したい場合は、携帯電話上の要素を非表示にするトグルを持っている -

Answer 2

は、2つのオプションがあります。

それぞれの要素または両方の要素の表示を動的に変更する場合は、formFactor APIとhide/show/collapse/expand APIを使用します。

たとえば、ボタンをクリックすると、デスクトップにelement1、モバイルにelement2を表示することができます。コードは次のようになります。

import wixWindow from 'wix-window'; 

export function button1_onClick() { 
    if (wixWindow.formFactor === 'Mobile') { 
    $w('#element2').show(); 
    } 
    else { 
    $w('#element1').show(); 
    } 
}