微信小程序源码微信小程序源码:设置两个按钮一个用来显示图片一个用来隐藏图片
时间: 2024-09-15 13:14:14 浏览: 87
在微信小程序中,你可以通过WXML(小程序的标记语言)来创建页面布局,JS来编写交互逻辑。这里是一个简单的例子,展示如何设置两个按钮来控制图片的显示和隐藏:
首先,在`pages/index.wxml`文件中,添加一个基础页面结构,包含一个图片组件和两个按钮:
```wxml
<view class="container">
<image id="showImage" src="{{imageUrl}}" wx:if="{{showImage}}"></image>
<button bindtap="toggleShowImage">显示图片</button>
<button bindtap="toggleHideImage">隐藏图片</button>
</view>
```
接下来,在`pages/index.js`中编写JavaScript逻辑:
```javascript
Page({
data: {
imageUrl: '默认图片路径', // 图片URL
showImage: true, // 初始时图片显示
},
toggleShowImage: function() {
this.setData({
showImage: !this.data.showImage,
});
},
toggleHideImage: function() {
this.setData({
showImage: false,
});
},
})
```
在这个例子中,当用户点击"显示图片"按钮时,`toggleShowImage`函数会切换`showImage`的数据状态,从而控制图片的显示;同样,点击"隐藏图片"按钮时,会将`showImage`设为`false`,隐藏图片。
阅读全文