Question

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

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

操场示例在这里：my code on 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>

Answer 1

我发现，在点击按钮时用图像和其他样式设置按钮样式的一种好方法是添加一些CSS。 :highlighted伪类在您的手指放在元素上时处于活动状态，而在您释放按钮时则处于活动状态。

我最终得到this code：

<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>

具有图像和点击响应的本地脚本vue按钮（按下事件）

1 个答案: