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

你有两个选择 -

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

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

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

import wixWindow from 'wix-window';

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

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

WixCode controlling view of element on mobile / desktop

velo