#<page>

<page> 是页面的根节点，一个页面上只能有一个 <page>。你也可以不在页面最外层显式写 <page>，前端框架会默认生成根节点。

#使用指南

#选择不写<page>

默认情况下，你无需手动添加 <page>，前端框架会生成根节点。

在这种情况下，虽然无法显式设置 style 和 class 等属性，但是通过 page 和 :root 选择器，你仍然可以很方便的给根节点添加样式，也可通过 SelectorQuery:selectRoot() 来选择根节点。

/* 使用 page 选择器添加样式 */
page {
  background-color: white;
}

/* 或者使用 :root 选择器添加样式 */
:root {
  background-color: white;
}

pagesrc/no_page_tag/index.scss

预览

#显式使用<page>

如果你想更灵活的给根节点添加样式或者绑定事件，可以选择在最外层添加 <page>。其用法跟 <view> 一致，可以使用 <view> 上除了宽、高、位置外的其他所有样式和属性。

const App = () => {
  return (
    <page className="body" bindtap={handlePageClick}>
      <view style={{ width: '100%', height: '100%' }}>
        <text className="title">Page Example</text>
      </view>
    </page>
  );
};

跟 <view> 类似，可以添加 style、class 以及绑定事件等，请注意，你只能写一个 <page>。

pagesrc/with_page_tag/index.tsx

预览

#不能直接修改大小

<page> 的大小约束是由客户端上其所在的外层视图指定，你无法直接通过 style 或者 class 修改其 width、height、left、top 样式。这样设计的好处是可以让 Lynx 页面嵌入到客户端页面中，从而更好自适应客户端视图的排版流程。