uniapp点击箭头展示下拉菜单
时间: 2023-07-05 10:20:17 浏览: 168
如果你需要展示一个下拉菜单,并且需要在箭头图标上添加点击事件来展示或隐藏下拉菜单,你可以使用`uniapp`的`v-show`指令和`<transition>`组件来实现。
以下是一个简单的示例代码:
```html
<template>
<view class="container">
<view class="select" @tap="toggleMenu">
<text>{{ selected }}</text>
<image class="arrow" :src="arrowIcon"></image>
</view>
<transition>
<view v-show="menuVisible" class="menu">
<view class="menu-item" v-for="(item, index) in options" :key="index" @tap="selectItem(index)">{{ item }}</view>
</view>
</transition>
</view>
</template>
<script>
export default {
data() {
return {
selected: '请选择',
options: ['选项1', '选项2', '选项3'],
menuVisible: false,
arrowIcon: 'static/images/arrow-down.png'
}
},
methods: {
toggleMenu() {
this.menuVisible = !this.menuVisible;
if (this.menuVisible) {
this.arrowIcon = 'static/images/arrow-up.png';
} else {
this.arrowIcon = 'static/images/arrow-down.png';
}
},
selectItem(index) {
this.selected = this.options[index];
this.menuVisible = false;
this.arrowIcon = 'static/images/arrow-down.png';
}
}
}
</script>
<style>
.container {
position: relative;
height: 100vh;
}
.select {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 20px;
}
.arrow {
width: 20px;
height: 20px;
transform: rotate(0deg);
transition: transform 0.3s;
}
.arrow.up {
transform: rotate(180deg);
}
.menu {
position: absolute;
top: 60px;
left: 0;
width: 100%;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.menu-item {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
border-bottom: 1px solid #ccc;
}
</style>
```
在上述代码中,我们使用了一个`<view>`标签作为下拉菜单的外部容器,并在容器内部使用了一个`<view>`标签作为选择器,并在选择器中添加了一个箭头图标。在箭头图标的`@tap`事件中,我们触发`toggleMenu`方法,用来展示或隐藏下拉菜单。
我们使用了`v-show`指令来控制下拉菜单的显示和隐藏。当`menuVisible`属性为`true`时,下拉菜单会显示,否则会隐藏。在`toggleMenu`方法中,我们将`menuVisible`属性取反,用来切换下拉菜单的显示和隐藏。
我们使用了`<transition>`组件来为下拉菜单添加过渡动画。在下拉菜单中,我们使用了`v-for`指令来循环渲染下拉菜单中的选项,并在选项的`@tap`事件中触发`selectItem`方法,用来选择选项。
在CSS中,我们使用了`transform`属性来旋转箭头图标,并使用`transition`属性来添加动画效果。我们还使用了`position: absolute`属性来使下拉菜单与选择器定位。