Question

我正在使用一个具有项目列表的基本应用程序，当选择一个项目时，其相应图像显示在图像标签中。问题是，图像非常“宽”，因此显得很小。我试图以某种方式为用户启用图像上的缩放功能。我检查了所有“拉伸”选项，但“捏”和“缩放”不起作用。根据官方文档，我查看了decodeHeight和decodeWidth，但它们似乎也无法正常工作。感谢您能获得的任何帮助，以下是代码：

<template>

    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>`enter code here`
            <StackLayout class="home-panel">
                <Image :src="img_src" strech="AspectFill"/>
                <ListView for="images in img_data" @itemTap="onButtonTap" style="height:200vh">
                    <v-template>
                        <Label :text="images.name" />
                    </v-template>
                </ListView>
                <!-- <Button text="Button" @tap="onButtonTap" /> -->
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
export default {
    methods: {
        onButtonTap(event) {
            console.log(event.index);
            this.img_src = "~/components/" + this.img_data[event.index].image;

        }
    },

    data() {
        return {
            img_src: "",
            img_data: [
                { name: "Iron Man", image: "iron_man.png" },
                { name: "super man", image: "super_man.png" },
                { name: "Batman", image: "batman.png" },
                { name: "Flash", image: "flash.png" },
            ]
        };
    }
};

</script>







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

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

Answer 1

首先，安装nativescript-image-zoom插件：

tns plugin add nativescript-image-zoom

然后globally register ImageZoom中的main.js元素：

Vue.registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);

现在您可以将其用作应用程序中所需的全局组件。

<ImageZoom v-if="ifStatement"
           :src="imageSrc"
           class="main-image" />

请记住，虽然组件的全局注册不会影响性能，但可以防止延迟加载元素。

Answer 2

通过运行以下命令安装插件

tns plugin add nativescript-image-zoom

使用此自定义组件替换您的图片标签

<StackLayout class="home-panel">
                <ui:ImageZoom :src="img_src" strech="AspectFill"/>
                <ListView for="images in img_data" @itemTap="onButtonTap" style="height:200vh">
                    <v-template>
                        <Label :text="images.name" />
                    </v-template>
                </ListView>
                <!-- <Button text="Button" @tap="onButtonTap" /> -->
            </StackLayout>

不要忘记将xmlns添加到您的Page元素。

xmlns:ui="nativescript-image-zoom"

如果您还有其他疑问，请随时提出。

NativeScript-Vue缩放图像

2 个答案: