欢迎光临,了解微信小程序开发,就上易用通!

小程序绑定事件跳转的三种方法

发布:2018-12-19 09:14浏览: 来源:网络 作者:cola

1:wx.navigateTo ;保留当前页面(有返回按钮)

效果:


小程序绑定事件跳转的三种方法(图1)

demo示例:

wxml:

<view bindtap="bindViewTap" class="up">
我要绑定事件来跳转了
</view>

js:

Page({
data: {

},

//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../site/site'
})
},

onLoad: function() {
},

})

wxss:

.up {
height: 80rpx;
line-height: 80rpx;
background:#44b0fc;
color: #fff;
text-align: center;
}
 

2:wx.redirectTo;关闭当前页面(无返回按钮)

wxml和样式同上  js:

 

  1. Page({
    data: {
    },
    
    //事件处理函数
    bindViewTap: function() {
    
    //2:关闭当前页面(无返回按钮)
    wx.redirectTo({
    url: '../site/site'
    })
    },
    
    onLoad: function() {},
    
    })
    

3:wx.switchTab;跳转到tabBar页面(底部导航)

遇到第一种wx.navigateTo 不跳转问题的时候(大多数是因为想要跳的界面是对应底部的导航,所以没有反应;这个时候,就需要用到这种方法了)  js:

 

  1. Page({
    data: {},
    //事件处理函数
    bindViewTap: function() {
    
    //3:跳转到tabBar页面(底部导航)
    //这种方法通常 是遇到wx.navigateTo 不跳转问题的时候(大多数是跳的底部的导航,所以没有反应)
    wx.switchTab({
    url: '../me/me'
    })
    },
    
    onLoad: function() {},
    
    })




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。