微信小程序，通过点击按钮实现在本页面上跳转到一个新页面
效果图：
一、wxml文件
<!-- 半透明层 -->
<view hidden="{{isHiddens}}" class="hiddenView" style="height:{{windowHeight}}px;">
<!-- 内容 -->
<view class="textView" style="height:{{windowHeight*110/340}}px;">
<view>许愿墙最初是承载愿望的实体，一种建筑，人们在上面涂涂画画或贴上小纸片，写上自己的愿望、期盼、祝福等；也用在网络上，一般是网站独立的一个空间页面，供人们展示许愿、祈祷、祝福等。</view>
<image mode="widthFix" class="textImg" src="../../imgs/Explain.png"></image>
</view>
<!-- 取消 -->
<view class="imgView">
<image bindtap="closeExplain" mode="widthFix" class="img"
src="../../imgs/Cancel.png"></image>
</view>
</view>
二·、wxss文件
.hiddenView{
position:absolute;
background-color:rgba(131,139,139,0.8);
width:100%;
z-index: 100;
}
.textView{
position: absolute;
padding:30rpx;
margin:40% 10%;
width:70%;
background-color: white;
border-radius: 70rpx;
border:10rpx solid rgba(79, 72, 156,0.9);
line-height:65rpx;
color:rgb(79, 72, 156);
font-size:32rpx;
}
.textImg{
position: absolute;
top:-100rpx;
margin:0 33%;
width:20%;
}
.imgView{
width:100%;
text-align: center;
/* margin-top:100rpx; */
}
.img{
width:14%;
position: absolute;
right:45%;
bottom:250rpx;
}
三、js文件
const app = getApp()
Page({
data: {
widowHeight:'',
isHiddens:true,
},
closeExplain() {
let that = this;
that.setData({
isHiddens: true
})
},