uni-app開發經驗分享六：頁面跳轉及提示框

在我們開發的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); //打印出上個頁面傳遞的參數。
    }
}

　　

 關閉當前頁面后跳轉（uni.redirectTo），具體參數如下：

 

 

 案例：

uni.redirectTo({
    url: 'test?id=1'
});

 

備注：關閉所有頁面后跳轉的方法為uni.reLaunch，直接替換uni.redirectTo即可使用。

 

如果你使用了上述方法后，你會發現，其實你無法調整到標題頁面，這里就需要一個標題頁面的跳轉方法，標題頁面跳轉（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 (res.confirm) {
            console.log('用戶點擊確定');
        } else if (res.cancel) {
            console.log('用戶點擊取消');
        }
    }
});

　　

uni.showActionSheet(OBJECT)：

​顯示操作菜單

 

 

 

 案例：

uni.showActionSheet({
    itemList: ['A', 'B', 'C'],
    success: function (res) {
        console.log('選中了第' + (res.tapIndex + 1) + '個按鈕');
    },
    fail: function (res) {
        console.log(res.errMsg);
    }
});

本文大量借鑒官網文檔，如果有什么疑問歡迎分享到評論區一起討論。