uni-app开发经验分享六：页⾯跳转及提⽰框
navigator标签
在我们开发的uni-app的过程中，页⾯跳转及提⽰框往往是我们做数据交互及结果反馈所要使⽤的功能，这⾥分享下我收集的⼀些⽅法及看法。
⼀：页⾯跳转
事件跳转：指通过tap等事件来实现页⾯的跳转，跳转的⽅法分三类，直接跳转，关闭当前页⾯后跳转，标题页⾯跳转。
直接跳转(uni.navigateTo)，具体参数如下：
案例：
//在起始页⾯跳转到test.vue页⾯并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 在test.vue页⾯接受参数
export default {
onLoad: function (option) { //option为object类型，会序列化上个页⾯传递的参数
console.log(option.id); //打印出上个页⾯传递的参数。
console.log(option.name); //打印出上个页⾯传递的参数。
}
}
关闭当前页⾯后跳转(directTo)，具体参数如下：
案例：
url: 'test?id=1'
});
备注：关闭所有页⾯后跳转的⽅法为Launch，直接替换directTo即可使⽤。
如果你使⽤了上述⽅法后，你会发现，其实你⽆法调整到标题页⾯，这⾥就需要⼀个标题页⾯的跳转⽅法，标题页⾯跳转(uni.switchTab)，具体参数如下：
案例：
page.json
{
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "⾸页"
},{
"pagePath": "pages/other/other",
"text": "其他"
}]
}
}
页⾯：
uni.switchTab({
url: '/pages/index/index'
});
标签跳转：指使⽤navigator来进⾏跳转。
案例：
<template>
<view>
<view class="page-body">
<view class="btn-area">
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页⾯</button>
</navigator>
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
<button type="default">跳转tab页⾯</button>
</navigator>
</view>
</view>
</view>
</template> 
提⽰框：这⾥记录官⽅的提⽰框，⾃定义的提⽰框等之后做⾃定义组件解析的时候⼀起制作uni.showLoading(OBJECT)：
显⽰ loading 提⽰框, 需主动调⽤ uni.hideLoading 才能关闭提⽰框。
案例：
uni.showLoading({
title: '加载中'
});
setTimeout(function () {
uni.hideLoading();
}, 2000);
uni.showModal(OBJECT)：
显⽰模态弹窗，类似于标准 html 的消息框：alert、confirm。
案例：
uni.showModal({
title: '提⽰',
content: '这是⼀个模态弹窗',
success: function (res) {
if (firm) {
console.log('⽤户点击确定');
} else if (res.cancel) {
console.log('⽤户点击取消');
}
}
});
uni.showActionSheet(OBJECT)：
显⽰操作菜单

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。