velo - WixCode 控制移动/桌面元素的视图

Question

我正在学习新的Wix Code在线开发 IDE，并想了解如何控制项目在移动设备或桌面上的可见性。我应该如何处理这个？

Answer 1

如果您只是想从移动设备中隐藏某些内容，则有一种更简单的方法（转到移动编辑器并单击元素的隐藏按钮）。

但是假设您因为需要自定义行为而询问 WixCode：

查看 formFactor API https://www.wix.com/code/reference/wix-window.html#formFactor 和属性面板 https://support.wix.com/en/article/working-with-the-属性面板 6441151

属性面板是您设置元素默认可见性的地方。然后使用上面的 API 检查 formFactor 最后使用 $w('#elementname).show() 或 hide() 更改其可见性。

Answer 2

你有两个选择——

如果您只想控制在移动设备和桌面设备上显示的内容，您可以在移动设备上隐藏元素。

如果要动态更改每个或两者上元素的可见性，请使用 formFactor 和 hide/show/collapse/expand API。

例如，在单击按钮时，您可能希望在桌面上显示 element1 并在移动设备上显示 element 2。代码将如下所示 -

import wixWindow from 'wix-window';

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