Я работаю над основным приложением, у которого есть список элементов, и когда элемент выбран, его соответствующее изображение отображается в теге изображения. Это значит, что изображения очень «широкие» и, следовательно, выглядят очень маленькими.Я пытаюсь как-то включить функцию масштабирования изображения для пользователя.Я проверил все опции «растянуть», но «щепотка» и «зум» не работают.Согласно официальной документации, я посмотрел на 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>