我有一排由StackLayout
制成的盒子,我希望仅在将手指按在盒子上时才更改背景颜色。我尝试在CSS中使用:highlighted
,但似乎只适用于按钮元素。
编辑:
我实际上有这个,但是由于它在v-for中,所以将它应用于我的所有盒子:
<StackLayout v-for="item in items" orientation="horizontal">
<StackLayout v-bind:class="{ 'color': bgColor }"
@touch="hoverOver($event)">
</StackLayout>
</StackLayout>
////
hoverOver: function(e) {
if (e.action == "down") {
this.bgColor = true;
} else if (e.action == "up") {
this.bgColor = false;
}
}
答案 0 :(得分:1)
一种简单的方法是在每个项目中都有一个标记
示例
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar" />
<ScrollView>
<StackLayout orientation="horizontal">
<Label v-for="item in items" :text="item.title" :class="[item.selected ? 'selected' : '', 'h1 p-15']"
@touch="hoverOver($event, item)">
</Label>
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
methods: {
hoverOver: function(e, item) {
item.selected = e.action !== "up" && e.action !==
"cancel";
}
},
data() {
return {
items: [{
title: "A",
selected: false
},
{
title: "B",
selected: false
},
{
title: "C",
selected: false
},
{
title: "D",
selected: false
}
]
};
}
};
</script>
<style scoped>
.selected {
color: red;
}
</style>