时间:2021-05-18
演示效果也看到了小程序也就提供这几个处理导航控制。值得注意的是只能同时导航五个页面
主要属性:
导航条一些方法
wx.setNavigationBarTitle(object) 设置导航条的Title
导航标题可以通过三种方式设置,第一种是通过全局配置名字统一,第二种就是在page中新建个json文件配置它会覆盖全局配置的title,第三种就是通过API设置。
wx.showNavigationBarLoading()设置在导航条上显示Loading加载状态
wx.hideNavigationBarLoading() 隐藏Loading加载状态
导航视图的一些方法
wx.navigateTo() 保留当前页面进行跳转,传参时就像拼接GET参数一样即可,代码中会有体现
wx.redirectTo() 销毁当前页面进行跳转,
wx.navigateBack() 返回上一个页面
wxml
<button type="primary" bindtap="setNavigationBarTitle">设置navigationBarTitle</button><button type="primary" bindtap="showNavigationBarLoading">设置navigationBarLoading加载状态</button><button type="primary" bindtap="hiddenNavigationBarLoading">隐藏navigationBarLoading加载状态</button><button type="warn" bindtap="navigateTo"> 保留当前页跳转</button><button type="warn" bindtap="redirectTo"> 不保留当前页面跳转</button><button type="warn" bindtap="navigateBack">退回到上一个页面</button>json
{
"navigationBarTitleText": "我是通过json配置的title"
}
js
//导入另一个页面var file = '../audio/audio'Page({ data:{ text:"Page navigation" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, /** * 设置NavigationTitle */ setNavigationBarTitle: function() { wx.setNavigationBarTitle({ title: '我是通过API设置的NavigationBarTitle' }) }, /** * 设置加载状态 */ showNavigationBarLoading: function() { wx.showNavigationBarLoading() }, /** * 隐藏加载状态 */ hiddenNavigationBarLoading: function() { wx.hideNavigationBarLoading() }, /** * 保留当前Page跳转 */ navigateTo: function() { wx.navigateTo({ //传递参数方式向get请求拼接参数一样 url: file + '?phone=18939571&password=1992', success: function(res) { console.log(res) }, fail: function(err) { console.log(err) } }) }, /** * 关闭当前页面进行跳转当前页面会销毁 */ redirectTo: function() { wx.redirectTo({ //传递参数方式向get请求拼接参数一样 url: file + '?phone=189395719&password=1992' }) }, /** * 退回到上一个页面 */ navigateBack: function() { wx.navigateBack() }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }})感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序后台解密用户数据实例详解微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-lo
微信小程序网络API:微信小程序网络API发起请求微信小程序网络API上传、下载微信小程序网络APIWebsocketwx.uploadFile(OBJECT)
微信小程序之网络请求简单封装实例详解在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题。普通HT
微信小程序实例-获取当前的地理位置、经纬度微信小程序官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/api/loca
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下:微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然