UNI-APP点击一个盒子的时候让另外一个盒子显现
时间: 2024-09-28 16:06:22 浏览: 32
uni-app 封装一个顶部选项卡组件
5星 · 资源好评率100%
在UNI-APP中,要实现这种效果,通常会结合JavaScript或者Vue.js来处理用户交互。当用户点击一个盒子时,可以通过事件监听器来触发另一盒子的显示隐藏。以下是一个简单的示例:
首先,在WXML里给需要交互的盒子添加`tap`事件:
```wxml
<view id="box1" class="item clickable" @tap="showBox2">盒1</view>
<view id="box2" class="item hidden">盒2</view>
```
这里假设`clickable`是自定义的类名,用于标记可点击元素,而`hidden`则是一个样式的类名,用于隐藏元素。
然后,在对应的JS部分或者Vue组件中,添加相应的事件处理函数:
```javascript
Page({
data: {
showBox2: false,
},
methods: {
showBox2Handler() {
this.setData({ showBox2: !this.showBox2 });
}
},
onTap(e) {
if (e.target.id === 'box1') {
this.showBox2Handler();
}
}
})
```
在这个例子中,当你点击`box1`时,`showBox2Handler`会被调用,改变`showBox2`的状态,进而切换`box2`的`hidden`或`visible`样式。
阅读全文