gpt4 book ai didi

vue.js - NativeScript-Vue 缩放图像

转载 作者:行者123 更新时间:2023-12-03 06:38:03 26 4
gpt4 key购买 nike

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.我试图以某种方式为用户启用图像的缩放功能。我检查了所有“拉伸(stretch)”选项,但“捏”和“缩放”不起作用。根据官方文档,我查看了 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>

最佳答案

一、安装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" />
请记住,虽然组件的全局注册不会影响性能,但它会阻止您延迟加载元素。

关于vue.js - NativeScript-Vue 缩放图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52807100/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com