微信小程序源码:设置两个按钮一个用来显示图片一个用来隐藏图片
时间: 2024-09-15 22:14:17 浏览: 46
微信小程序的源码中,通常会使用WXML(小程序的标记语言)编写页面结构,JS(JavaScript)处理交互逻辑。如果你想创建一个有两个按钮,一个用于显示图片、另一个用于隐藏图片的功能,可以参考以下步骤:
1. WXML部分(index.wxml):
```html
<view class="container">
<button bindtap="showImage">显示图片</button>
<button bindtap="hideImage">隐藏图片</button>
<image id="myImage" src="" mode="scale-to-fit"></image>
</view>
```
这里设置了两个`button`元素,分别绑定了`showImage`和`hideImage`这两个事件处理器。
2. JS部分 (index.js):
```javascript
Page({
data: {
show: false,
imageUrl: '默认图片路径'
},
showImage: function() {
this.setData({
show: true
});
},
hideImage: function() {
this.setData({
show: false
});
}
})
```
在JS中,我们定义了数据属性`show`控制图片是否可见,并有`showImage`和`hideImage`函数改变`show`的值,当`show`为`true`时,图片显示,为`false`时,图片隐藏。`myImage`组件通过`data.imageUrl`设置初始图片路径。
当你切换按钮时,只需要更新`imageUrl`和`show`的值,就可以实现图片的显示和隐藏。
阅读全文