使用nativescript vuejs具有淡入淡出效果的UIScrollView

我想知道是否可以在nativescript中使用具有淡入效果的UIScrollView

例如：

我阅读了文档，但没有找到这些信息

我想要这个结果，例如：

你有什么想法吗？多谢各位

我不知道如何将本机代码放入组件中

<template>
    <ScrollView class="scroll" orientation="vertical" row="1" ref="scrollView">
        <StackLayout marginLeft="10" marginRight="10" class="container-verses">
            <StackLayout horizontalAlignment="center">
                <Label textWrap="true" textAlignment="center" text="hello" color="#FFFFFF" fontSize="20"/>
                ...
                <Label textWrap="true" textAlignment="center" text="hello" color="#FFFFFF" fontSize="20"/>
            </StackLayout>
        </StackLayout>
    </ScrollView>
</template>

<script>
    export default {
        name    : 'FadeScrollView',
        computed: {},
        methods : {
            //
        }
    };
</script>

<style lang='scss' scoped>

</style>

...
导出默认值{
名称：“FadeScrollView”，
计算：{}，
方法：{
//
}
};

以下是将Swift翻译成NativeScript的方法

import { isIOS } from "@nativescript/core/platform";
import { ScrollView } from "@nativescript/core/ui/scroll-view";

let FadeScrollViewImpl;

if (isIOS) {
    FadeScrollViewImpl = UIScrollView.extend({
        fadePercentage: 0.2,
        gradientLayer: CAGradientLayer.new(),
        transparentColor: UIColor.clearColor.CGColor,
        opaqueColor: UIColor.blackColor.CGColor,

        topOpacity: () => {
            const scrollViewHeight = this.frame.size.height;
            const scrollContentSizeHeight = this.contentSize.height;
            const scrollOffset = this.contentOffset.y;
            const alpha = (scrollViewHeight >= scrollContentSizeHeight || scrollOffset <= 0) ? 1 : 0;
            return UIColor.alloc().initWithWhiteAlpha(0, alpha).CGColor;
        },

        bottomOpacity: () => {
            const scrollViewHeight = this.frame.size.height;
            const scrollContentSizeHeight = this.contentSize.height;
            const scrollOffset = this.contentOffset.y;
            const alpha = (scrollViewHeight >= scrollContentSizeHeight || scrollOffset + scrollViewHeight >= scrollContentSizeHeight) ? 1 : 0
            return UIColor.alloc().initWithWhiteAlpha(0, alpha).CGColor;
        },

        layoutSubviews() {
            super.layoutSubviews()

            this.delegate = this;
            const maskLayer = CALayer.new();
            maskLayer.frame = this.bounds;

            this.gradientLayer.frame = CGRectMake(this.bounds.origin.x, 0, this.bounds.size.width, this.bounds.size.height);
            this.gradientLayer.colors = [this.topOpacity, this.opaqueColor, this.opaqueColor, this.bottomOpacity];
            this.gradientLayer.locations = [0, NSNumber.alloc().initWithFloat(this.fadePercentage), NSNumber.alloc().initWithFloat(1 - this.fadePercentage), 1];
            maskLayer.addSublayer(this.gradientLayer);

            this.layer.mask = maskLayer
        },

        scrollViewDidScroll(scrollView) {
            this.gradientLayer.colors = [topOpacity, opaqueColor, opaqueColor, bottomOpacity];
        }
    });
}

export class FadeScrollView extends ScrollView {
    createNativeView() {
        if (isIOS) {
            return FadeScrollViewImpl.new();
        } else {
            return super.createNativeView();
        }
    }

    attachNative() {
        if (!isIOS) {
            super.attachNative();
        }
    }
}

---

您可以覆盖从白色到透明的渐变。方法取决于你的布局。谢谢@IgorR。但我想在背景中使用一个图像，您提供的链接作为示例，显示顶部褪色的文本。你能用一个你想做的例子来更新你的问题吗？也许画点什么来解释它？@IgorR。我用一个例子更新了我的帖子。你可以移植准确的本机代码并创建一个新的{N}组件来扩展ScrollView，覆盖创建本机视图以返回FadeScrollView.Awesome@Manoj的实例！！非常感谢你！！

Vue.registerElement('FadeScrollView', () => require('./fade-scrollView').FadeScrollView)