微信小程序,请创建两个页面,通过按钮来互相切换
时间: 2023-05-29 15:02:54 浏览: 200
以下是一个简单的微信小程序,包含两个页面,可以通过按钮来互相切换。
第一页的代码:
```
<!-- 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` 返回到第一页。