NativeScript-Vue缩放图像

Question

我正在开发一个基本的应用程序，它有一个项目列表，当一个项目被选中时，其相应的图像将显示在图像tag.Issue中，图像非常“宽”，因此看起来非常小。我试图以某种方式为用户启用图像上的缩放功能。我检查了所有的“拉伸”选项，但“收缩”和“缩放”都不起作用。根据官方文档，我查看了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

然后在main.js中globally register ImageZoom元素

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

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

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

如果你还有什么问题，请不要犹豫，尽管问。