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

Question

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

Answer 1

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

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

查看外形规格 APIhttps://www.wix.com/code/reference/wix-window.html#formFactor和属性面板https://support.wix.com/en/article/working-with-the-properties-panel-6441151

在

属性面板中，您可以设置元素的默认可见性。然后使用上面的 API 检查表单因素最后使用 $w('#elementname(.show(( 或 hide(( 来更改其可见性。

Answer 2

你有两个选择 -

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

如果要动态更改每个或两个元素上的元素可见性，请使用 formFactor 并隐藏/显示/折叠/展开 API。

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

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