微信小程序点击不同的按钮,展示不同的信息内容
时间: 2024-02-20 07:55:59 浏览: 16
好的,这个问题涉及到微信小程序的前端开发。一种实现方法是使用不同的按钮组件,并在点击事件中根据不同按钮的标识符来展示对应的信息内容。具体实现可以使用 wx:if 或者 hidden 属性来控制组件的显隐状态。例如:
```html
<view>
<button bindtap="showInfo" data-type="type1">按钮1</button>
<button bindtap="showInfo" data-type="type2">按钮2</button>
<button bindtap="showInfo" data-type="type3">按钮3</button>
</view>
<view wx:if="{{showType === 'type1'}}">
<text>这是按钮1对应的信息内容</text>
</view>
<view wx:if="{{showType === 'type2'}}">
<text>这是按钮2对应的信息内容</text>
</view>
<view wx:if="{{showType === 'type3'}}">
<text>这是按钮3对应的信息内容</text>
</view>
```
在对应的 js 文件中,可以通过获取点击事件的 data-type 属性来确定展示哪个信息内容:
```javascript
Page({
data: {
showType: ''
},
showInfo(event) {
const type = event.currentTarget.dataset.type;
this.setData({
showType: type
})
}
})
```
当用户点击不同的按钮时,就会切换展示不同的信息内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)