微信小程序创建两个页面 通过按钮实现跳转
时间: 2023-05-21 11:01:27 浏览: 861
可以使用wx.navigateTo和wx.redirectTo两个API实现页面跳转。在第一个页面中,可以使用button组件绑定一个tap事件,在事件处理函数中使用wx.navigateTo或wx.redirectTo跳转到第二个页面。需要注意的是,wx.navigateTo可以返回上一个页面,而wx.redirectTo不能返回上一个页面。
相关问题
微信小程序请创建两个页面,通过按钮来相互切换
好的,我可以为您提供相关的代码示例来实现这个功能。首先,您需要在微信小程序里创建两个页面,比如命名为page1和page2。然后,您可以在page1页面中添加一个按钮,用于切换到page2页面,代码如下:
```
<view>
<button bindtap="gotoPage2">切换到page2页面</button>
</view>
```
在相应的js文件中,定义一个gotoPage2函数,用于点击按钮后跳转到page2页面,代码如下:
```
Page({
gotoPage2: function() {
wx.navigateTo({
url: '/pages/page2/page2',
})
}
})
```
同样的,您也可以在page2页面中添加一个按钮,用于返回到page1页面,代码如下:
```
<view>
<button bindtap="gotoPage1">返回到page1页面</button>
</view>
```
在相应的js文件中,定义一个gotoPage1函数,用于点击按钮后返回到page1页面,代码如下:
```
Page({
gotoPage1: function() {
wx.navigateBack({
delta: 1
})
}
})
```
这样,您就可以在微信小程序中创建两个页面,并通过按钮相互切换了。
微信小程序,请创建两个页面,通过按钮来互相切换
以下是一个简单的微信小程序,包含两个页面,可以通过按钮来互相切换。
第一页的代码:
```
<!-- index.wxml -->
<view class="container">
<view class="page">
<view class="title">第一页</view>
<button class="btn" bindtap="toSecondPage">切换到第二页</button>
</view>
</view>
```
```
/* index.wxss */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 80%;
height: 80%;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
background-color: #007aff;
color: #fff;
border-radius: 5px;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
cursor: pointer;
outline: none;
}
.btn:hover {
background-color: #0062cc;
}
```
```
// index.js
Page({
toSecondPage: function() {
wx.navigateTo({
url: '/pages/second/index'
})
}
})
```
第二页的代码:
```
<!-- second.wxml -->
<view class="container">
<view class="page">
<view class="title">第二页</view>
<button class="btn" bindtap="toFirstPage">切换到第一页</button>
</view>
</view>
```
```
/* second.wxss */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 80%;
height: 80%;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
background-color: #007aff;
color: #fff;
border-radius: 5px;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
cursor: pointer;
outline: none;
}
.btn:hover {
background-color: #0062cc;
}
```
```
// second.js
Page({
toFirstPage: function() {
wx.navigateBack()
}
})
```
需要注意的是,第一页的按钮通过 `wx.navigateTo` 跳转到第二页,第二页的按钮通过 `wx.navigateBack` 返回到第一页。