uniapppage-container中有四个view点击哪个出现哪个
时间: 2023-08-03 22:06:33 浏览: 221
如果你想要在 `uni-app` 中实现在一个 `page-container` 组件中显示四个不同的 `view`,并且通过点击不同的 `view` 显示对应的内容,可以按照以下步骤进行:
1. 在 `page-container` 组件的模板中,定义四个 `view`,并分别为它们添加一个点击事件处理函数,如下所示:
```
<template>
<div class="page-container">
<view class="tab" @tap="showContent(1)">Tab 1</view>
<view class="tab" @tap="showContent(2)">Tab 2</view>
<view class="tab" @tap="showContent(3)">Tab 3</view>
<view class="tab" @tap="showContent(4)">Tab 4</view>
<view v-if="activeTab === 1">Content 1</view>
<view v-if="activeTab === 2">Content 2</view>
<view v-if="activeTab === 3">Content 3</view>
<view v-if="activeTab === 4">Content 4</view>
</div>
</template>
```
2. 在 `page-container` 组件的 data 中定义一个 `activeTab` 属性,表示当前激活的标签页,初始值为 1:
```
<script>
export default {
data() {
return {
activeTab: 1
}
},
methods: {
showContent(tab) {
this.activeTab = tab
}
}
}
</script>
```
3. 点击不同的标签页时,调用 `showContent` 方法,将 `activeTab` 属性的值设置为对应的标签页序号。在模板中使用 `v-if` 指令,根据 `activeTab` 属性的值显示对应的内容。
这样,当用户点击不同的标签页时,就可以显示对应的内容了。
需要注意的是,`uni-app` 中的事件绑定属性是 `@tap` 而不是 `@click`。