时间戳

首页 > 解决方案 > NativeScript-Vue 缩放图像

vue.js - NativeScript-Vue 缩放图像

问题描述

I am working on a basic app that has a list of items and when an item is selected its corresponding image is show in an image tag.Issue is, the images are very "wide" and hence appear very small. 我试图以某种方式为用户启用图像的缩放功能。我检查了所有“拉伸”选项，但“捏”和“缩放”不起作用。根据官方文档，我查看了 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>

标签： vue.jsnativescript

解决方案

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

tns plugin add nativescript-image-zoom

然后在你的全局注册ImageZoom元素main.js：

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

现在，您可以将它用作应用程序中任何您想要的全局组件。

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

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

推荐阅读