@nativescript-community/ui-parallax

安装

$ npm install @nativescript-community/ui-parallax

示例 xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
	 xmlns:parallax="@nativescript-community/ui-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.">
			</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 插件时，您需要在 <parallax:ParallaxView> 元素内部至少放置两个布局视图。<parallax:Header> 和 <parallax:Content>。
还有一个可选的第三个视图称为 <parallax:Anchored>，它将自己在 Header 下方定位，一旦它达到屏幕顶部，就会在那里锚定自己。

属性

React

在根 app.ts 文件中

import { registerParallax } from "@nativescript-community/ui-parallax/react"
registerParallax()

组件

        <parallaxView bounce controlsToFade="headerLabel,headerLabel2"
            onLoaded={(args) => {
                args.object.on('anchored', () => console.log('anchored'))
                args.object.on('unanchored', () => console.log('unanchored'))
                args.object.on('scroll', () => console.log('scroll'))
            }}>
            <parallaxHeader class="header-template" height="300">
                <label id="headerLabel" backgroundColor="purple" text="Parallax" width="100%" />
                <label id="headerLabel2" text="Header Component" />
            </parallaxHeader>
            <parallaxAnchored className="anchor" iosIgnoreSafeArea>
                <label id="titleLabel" text="Mr. Anchor" />
            </parallaxAnchored>
            <parallaxContent class="body-template">
                <label text="Content" class="header" textWrap="true" />

                <label textWrap="true" 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.">
                </label>
            </parallaxContent>
        </parallaxView>

插件开发工作流程。

• 将仓库克隆到您的机器上。
• 首先运行 npm install
• 然后运行 npm run setup 以准备演示项目
• 使用 npm run build 构建
• 使用 npm run demo.android 或 npm run demo.ios 运行并将您的设备或模拟器

特别感谢

JoshDSommer 开发了原始插件。

许可

MIT