@nstudio/nativescript-parallax

npm install @nstudio/nativescript-parallax

https://github.com/nstudio/nativescript-ui-kit/assets/457187/b62ebc72-61fa-425e-8734-cf07e151ed6f

用法

示例 XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
	 xmlns:parallax="@nstudio/nativescript-parallax"
	loaded="pageLoaded">
  	<parallax:ParallaxView controlsToFade="headerLabel,headerLabel2">
		<parallax:Header class="header-template" dropShadow="true">
			<Label id="headerLabel" text="Parallax"></Label>
			<Label id="headerLabel2" text="Component"></Label>
		</parallax:Header>
		<parallax:Anchored class="anchor">
			<Label id="titleLabel" text="Parallax Template"></Label>
		</parallax:Anchored>
		<parallax:Content class="body-template">
			<TextView editable="false" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

			Ut at consequat libero, at pharetra purus. Integer mi lorem, luctus eget porttitor vitae, pharetra et urna. Morbi et euismod lacus. Vestibulum a massa odio. Aenean at neque hendrerit, consequat sem et, congue mi. Sed egestas, ante feugiat lacinia tempus, lacus lorem laoreet magna, a hendrerit augue leo vitae risus. Integer ornare odio nec libero elementum malesuada. Cras sem sapien, aliquet eget nibh molestie, finibus dictum augue. Nulla mi metus, finibus id arcu nec, molestie venenatis libero. Morbi a pharetra odio. Maecenas viverra, quam at sollicitudin sodales, diam purus lacinia dolor, vitae scelerisque erat mi nec nibh. Quisque egestas et nunc in pharetra. Sed vitae tincidunt justo, dictum tincidunt nisi. Quisque tempus dolor urna, et mattis velit porta vitae.">
			</TextView>
		</parallax:Content>
	</parallax:ParallaxView>
</Page>

示例 CSS

#headerLabel2
{
	font-size: 45;
	horizontal-align: center;
	margin-top:-25;
	color:#B2EBF2;
}
#headerLabel{
	font-size: 45;
	horizontal-align: center;
	padding-top:75;
	color:#B2EBF2;
}
.header-template{
	background-color:#212121;
	background-image:url('~/images/mountains.png');
	background-size: cover;
	height: 200;
}
.body-template TextView{
	font-size:20;
	padding:5 15;
	border:none;
}
.anchor{
	height: 55;
	width:100%;
	background-color:#616161;
}
#titleLabel{
	font-weight:bold;
	font-size:25;
	padding:5 15;
	color:#fff;

}

要使用 Parallax 插件，您需要首先使用 xmlns:parallax="@nstudio/nativescript-parallax" 将其导入到您的 xml 布局中。

当使用 Parallax 插件时，您需要在 <parallax:ParallaxView> 元素内部至少放置两个布局视图。 <parallax:Header> 和 <parallax:Content>。还有一个可选的第三个视图 <parallax:Anchored>，它将位于 Header 下面，一旦它到达屏幕顶部，就会将其锚定在那里。

要添加如标签等需要在 <parallax:Parallaxiew> 中淡出的视图，请添加 controlsToFade 属性，并传递一个逗号分隔的字符串，其中包含您想要淡出的每个控制 ID。在上面的示例中，它看起来像 controlsToFade="headerLabel,headerLabel2"，将淡出这两个标签。

<parallax:Anchored> 有一个名为 dropShadow 的属性，如果设置为 true，则将在锚的底部创建一个小阴影效果。

如果 <parallax:Content> 的内部内容不足以导致页面滚动，则不会显示 Parallax 效果。

从版本 1.1.0 开始，bounce/overscroll 效果默认禁用，要重新启用它，请在 ParallaxView 元素上设置 bounce=true。

事件

scroll: 在滚动时发生
anchored: 当锚击中时
unanchored: 当锚脱落时

特别感谢

Josh Sommer 为此插件做出的贡献！
还要感谢 Steve McNiven-Scott 对优化、事件以及将插件在 v3+ 上工作的贡献

许可证

Apache 许可协议第 2 版