微信小程序跳转页面

效果图：

说明：关于怎么添加iconfont图标“<”，我的博客上有详细的讲解。

一、wxss

<view class='home-page' style='margin-top: {{height}}px'>

<h4 class="navbar-relation">联系我们</h4>

<view class="iconfont icon-fanhui" style="font-size:36rpx;" bindtap='skipWeather'></view>

</view>

二、wxss

/* 导航栏样式 */

.home-page{

position: fixed;

height: 10vh;

width: 100%;

background-color: #EAC100;

z-index: 9999;

}

.navbar-relation {

position: absolute;

left: 50%;

top: 65%;

transform: translate(-50%,-50%);

font-size: 36rpx;

}

.icon-fanhui{

position: absolute;

left: 4%;

top: 65%;

transform: translate(-4%,-50%);

font-weight: bold;

}

三、js

skipWeather: function () {

wx.navigateTo({

url: '../payment/payment',

})

},