微信小程序按钮切换图片
时间: 2024-10-06 17:01:01 浏览: 5
在微信小程序中,要实现按钮切换图片的功能,你可以使用`image`组件配合JavaScript来完成。首先,在你的.wxml文件里,定义一个`button`元素和两个`image`元素作为备选图源:
```html
<view class="container">
<button bindtap="switchImage">点击切换图片</button>
<image id="image1" src="{{image1}}" mode="widthFix"></image>
<image id="image2" src="{{image2}}" mode="widthFix"></image>
</view>
```
然后,在对应的.js文件中设置初始图片路径,并定义`switchImage`函数:
```javascript
Page({
data: {
image1: 'path/to/image1.jpg',
image2: 'path/to/image2.jpg', // 另一张图片路径
},
switchImage: function() {
let index = this.data.currentIndex; // 或者初始化currentIndex为0
if (index === 0) {
this.setData({
image1: this.data.image2,
image2: this.data.image1,
currentIndex: 1
});
} else {
this.setData({
image1: this.data.image1,
image2: this.data.image2,
currentIndex: 0
});
}
},
})
```
在这个例子中,每次点击按钮,会通过`setData`方法切换当前显示的图片,并更新索引。`currentIndex`变量可以用来跟踪当前显示的是哪张图片。