微信小程序怎么实现点击一个图片,跳转到另一个页面,现在我有三张图片需要跳转
时间: 2024-04-29 11:21:11 浏览: 188
微信小程序 跳转页面的两种方法详解
5星 · 资源好评率100%
1. 在小程序的页面中,使用`<image>`标签来添加图片。
2. 给每张图片添加一个`bindtap`事件,用来触发点击事件。
3. 在该事件中,使用`wx.navigateTo`函数来跳转到目标页面。
4. 在目标页面中,可以使用`<image>`标签来显示对应的图片。
示例代码:
在页面中添加三张图片:
```
<image src="/images/pic1.jpg" bindtap="gotoPage1"></image>
<image src="/images/pic2.jpg" bindtap="gotoPage2"></image>
<image src="/images/pic3.jpg" bindtap="gotoPage3"></image>
```
在对应的Page中添加事件处理函数:
```
Page({
gotoPage1: function() {
wx.navigateTo({
url: '/pages/page1/page1'
})
},
gotoPage2: function() {
wx.navigateTo({
url: '/pages/page2/page2'
})
},
gotoPage3: function() {
wx.navigateTo({
url: '/pages/page3/page3'
})
}
})
```
在目标页面中添加对应的图片:
```
<image src="/images/pic1.jpg"></image> <!-- 对应page1 -->
<image src="/images/pic2.jpg"></image> <!-- 对应page2 -->
<image src="/images/pic3.jpg"></image> <!-- 对应page3 -->
```
阅读全文