1

我刚开始在 play.nativescript.org 上玩 Nativescript- vue。
现在我想创建带有图像的大按钮，当您点击（点击向下）时会稍微改变颜色。

当您点击时，普通按钮已经略微改变颜色（在 android 上测试）。但是带有图像的普通按钮不会，带有图像的布局元素也不会。

游乐场示例在这里：我在 play.nativescript 上的代码（我也粘贴了下面的代码）。
在这个基本应用程序中，下方的两个按钮（无图像）在点击时会改变颜色，但顶部的两个按钮（有图像）不会。

如何向带有图像的按钮添加一些动画/反馈？

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <GridLayout columns="*, *" rows="*, *">
            <GridLayout @tap="onButtonTap" row="0" col="0" columns="*" rows="*" backgroundColor="#43b883">
                <Image row="0" col="0" src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png" />
            </GridLayout>
            <Button text="Button" @tap="onButtonTap" row="0" col="1" backgroundImage="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"
         backgroundColor="#1c6b48" />
            <Button text="Button" @tap="onButtonTap" row="1" col="0" backgroundColor="#289062" />
            <Button text="Button" @tap="onButtonTap" row="1" col="1" backgroundColor="#43b883" />
        </GridLayout>
    </Page>
</template>

<script>
    export default {
        methods: {
            onButtonTap() {
                console.log("Button was pressed");
            }
        },

        data() {
            return {};
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>
4

1 回答 1

0

我发现用图像和不同样式设置按钮样式的一个好方法是添加一些 CSS。当:highlighted您的手指在元素上而不是当您释放按钮时，伪类是活动的。

我最终得到了这段代码：

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <GridLayout columns="*, *" rows="*, *">
            <Button class="button-1" text="Button" @tap="onButtonTap" row="0" col="0" />
            <Button class="button-2" text="Button" @tap="onButtonTap" row="0" col="1" />
            <Button class="button-3" text="Button" @tap="onButtonTap" row="1" col="0" />
            <Button class="button-4" text="Button" @tap="onButtonTap" row="1" col="1" />
        </GridLayout>
    </Page>
</template>

<script>
    export default {
        methods: {
            onButtonTap() {
                console.log("Button was pressed");
            }
        },

        data() {
            return {};
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }

    .button-1 {
        background-color: #43b883;
    }

    .button-2 {
        background-color: #1c6b48;
    }

    .button-3 {
        background-color: #289062;
    }

    .button-4 {
        background-color: #43b883;
    }

    button {
        background-image: url("https://play.nativescript.org/dist/assets/img/NativeScript_logo.png");
        background-repeat: no-repeat;
        background-position: center center;
    }

    button:highlighted {
        background-color: #000000;
    }
</style>
于 2018-10-12T13:21:37.977 回答