uniapp頁面之間傳遞數據詳解

一、uniapp頁面參數傳遞

在uniapp中，頁面之間參數傳遞是一件十分常見的事情。我們可以通過傳遞參數的方式，將數據在不同的頁面之間傳遞，並在接收數據的頁面進行相應的處理。下面是一個簡單的例子：


// 發送頁面
uni.navigateTo({
    url: '/pages/receiveData/receiveData?name='+'Jerry'+'&age=18',
});

// 接收頁面
<template>
    <view>
        <text>{{ name }}</text>
        <text>{{ age }}</text>
    </view>
</template>
<script>
    export default {
       data() {
            return {
                name: '',
                age: '',
            };
        },
        onLoad(options) {
            this.name = options.name;
            this.age = options.age;
        }
    };
</script>

在這個例子中，我們使用的是uni.navigateTo方法進行頁面跳轉，並通過傳遞query參數的方式，將數據從發送頁面傳遞給接收頁面。在接收頁面中，使用onLoad鉤子函數來獲取傳遞過來的參數，並將其賦值給綁定在頁面上的數據。這種方式比較簡單，但是只適用於傳遞簡單的參數。

二、uniapp頁面更新數據不同步

在uniapp中，有時候在頁面A中更新了數據，但是在頁面B中並沒有及時地同步更新數據。這種情況多半是因為頁面B的數據沒有及時地進行刷新導致的。為了解決這個問題，我們可以需要在頁面B中重新獲取數據，或者使用vuex進行數據管理。


// 獲取數據方式一：使用onShow方法
<template>
    <view>
        <text>{{ data }}</text>
    </view>
</template>
<script>
    export default {
       data() {
            return {
                data: '',
            };
        },
        onShow() {
            this.getData();
        },
        methods: {
            getData() {
                // 發送請求獲取數據
                // ...
                this.data = data;
            }
        }
    };
</script>

// 獲取數據方式二：使用vuex
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        data: '',
    },
    mutations: {
        setData(state, data) {
            state.data = data;
        }
    },
    actions: {
        getData(context) {
            // 發送請求獲取數據
            // ...
            context.commit('setData', data);
        }
    }
});
export default store;

// 頁面B
<template>
    <view>
        <text>{{ data }}</text>
    </view>
</template>
<script>
    import { mapState, mapActions } from 'vuex';

    export default {
        computed: mapState(['data']),
        onLoad() {
            this.getData();
        },
        methods: {
            ...mapActions(['getData']),
        }
    };
</script>

在這個例子中，我們提供了兩種方法來解決數據不同步的問題。方式一是在頁面B中使用onShow方法，在頁面每次顯示的時候重新獲取數據，來確保數據的實時性。而方式二則是使用vuex進行數據管理，將數據存儲在vuex中，通過vuex的狀態管理，來確保數據的同步更新。

三、uniapp傳遞數據到下一頁

在uniapp中，頁面之間的跳轉是常見的場景。但是我們有時候需要傳遞數據到下一頁。這時候我們可以通過跳轉時攜帶參數的方式，將數據傳遞給下一頁。具體實現方式如下：


// 發送頁面
<template>
    <view>
        <button @click="jumpToNext">跳轉到下一頁</button>
    </view>
</template>
<script>
    export default {
        methods: {
            jumpToNext() {
                uni.navigateTo({
                    url: '/pages/nextPage/nextPage?data='+JSON.stringify({ name: 'Jerry', age: 18 })
                });
            }
        }
    };
</script>

// 接收頁面
<template>
    <view>
        <text>{{ data.name }}</text>
        <text>{{ data.age }}</text>
    </view>
</template>
<script>
    export default {
       data() {
            return {
                data: {},
            };
        },
        onLoad(options) {
            this.data = JSON.parse(options.data);
        }
    };
</script>

在這個例子中，我們在發送頁面中通過JSON.stringify將數據轉化為字符串，並在通過url的方式將數據傳遞給接收頁面。在接收頁面中，在onLoad鉤子函數中獲取到傳遞的數據，並通過JSON.parse將字符串轉化為對象，並將其賦值給綁定在頁面上的數據。

四、uniapp等待數據加載頁面

在uniapp開發中，我們有時候需要提供一個等待加載數據的頁面，以便用戶在等待的過程中更流暢地使用應用。這裡提供一種簡單的實現方式：


<template>
    <view v-show="loading">
        <image src="../../../static/images/loading.gif">
        <text>正在加載，請稍後...</text>
    </view>
    <view v-show="!loading">
        // 數據加載完成後顯示的內容
    </view>
</template>
<script>
    export default {
       data() {
            return {
                loading: true,
            };
        },
        methods: {
            // 加載數據的方法，可以是請求數據或者其他方式
            loadData() {
                setTimeout(() => {
                    this.loading = false;
                }, 2000);
            }
        },
        onLoad() {
            this.loadData();
        }
    };
</script>

在這個例子中，我們實現了一個等待加載數據的頁面。通過v-show指令來控制loading和非loading兩部分內容的顯示和隱藏。在頁面初始化的時候調用loadData方法，來模擬數據的加載。在loadData方法中，通過setTimeout函數模擬數據加載需要的時間，並在加載完成後將loading置為false，以顯示數據加載完成後的內容。

五、uniapp刷新當前頁面數據

有時候我們需要用戶手動觸發頁面數據的刷新，以便頁面上的數據可以得到及時的更新。這個可以通過下拉刷新來輕易地實現。


<template>
    <view>
        <scroll-view :scroll-y="true" @scrolltoupper="onRefresh">
            <view>
                // 數據顯示部分
            </view>
        </scroll-view>
    </view>
</template>
<script>
    export default {
        methods: {
            onRefresh() {
                // 發送請求重新獲取數據
                // ...

                // 數據獲取成功後，更新當前頁面的數據
                // ...
            }
        }
    };
</script>

在這個例子中，我們通過scroll-view組件，來實現下拉刷新的功能。在用戶下拉的時候，觸發onRefresh函數。在onRefresh函數中，我們可以發送請求重新獲取數據，並在數據獲取成功後，以相應的方式進行數據更新。

六、uniapp請求傳遞和獲取數據

在uniapp中，發送請求獲取數據是一種常見的實現方式。下面是一個簡單的實現方式：


<template>
    <view>
        <button @click="getData">獲取數據</button>
        <text>{{ data }}</text>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                data: '',
            };
        },
        methods: {
            getData() {
                uni.request({
                    url: 'https://www.example.com/getData',
                    success: (res) => {
                        this.data = res.data;
                    }
                });
            }
        }
    }
</script>

在這個例子中，我們通過uni.request發送請求，獲取數據。在請求成功後，使用返回的數據更新當前頁面的數據。這種方式比較簡單，但是只適用於請求返回的數據不是很複雜的情況。

七、uniapp數據更新時頁面閃爍

在uniapp中，有時候當頁面上的數據改變時，頁面會出現閃爍的情況。這種現象多半是因為頁面中的數據更新頻繁，導致頁面需要頻繁地重新渲染，從而造成的。為了解決這個問題，我們可以使用自定義組件，將該組件內需要更新的數據進行封裝，避免整個頁面的數據都進行更新。


// my-component.vue
<template>
    <view>
        <slot :data="data">{{ data }}</slot>
    </view>
</template>
<script>
    export default {
       props: ['data'],
    };
</script>

// page.vue
<template>
    <view>
        // 其他頁面內容
        <my-component :data="data">
            <template v-slot="{ data }">
                <text>{{ data }}</text>
            </template>
        </my-component>
        // 其他頁面內容
    </view>
</template>
<script>
    import MyComponent from '@/components/my-component.vue';

    export default {
        components: {
            MyComponent,
        },
        data() {
            return {
                data: '',
            };
        },
        methods: {
            getData() {
                // 發送請求，獲取數據
                // ...
                this.data = data;
            }
        },
        onLoad() {
            this.getData();
        }
    };
</script>

在這個例子中，我們將需要更新的數據封裝在了自定義組件中。在頁面中引入該自定義組件，並將需要更新的數據通過props的方式傳遞給該組件。在自定義組件中，使用slot來進行數據的插入，並將數據作為插槽的參數傳遞到頁面中進行渲染。通過這種方式，我們避免了整個頁面的數據都進行更新，從而解決了頁面閃爍的問題。

八、uniapp加載數據延遲顯示頁面

在uniapp開發中，我們有時候會遇到數據等不及而頁面先顯示的情況，這顯然會影響用戶體驗。為了避免這個問題，我們可以使用vue的v-if指令來控制數據加載完成後頁面的顯示。


<template>
    <view>
        <view v-if="!loading">
            // 數據加載成功後顯示的內容
            <text>{{ data }}</text>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                loading: true,
                data: '',
            };
        },
        methods: {
            showData() {
                this.loading = false;
            },
            getData() {
                // 發送請求，獲取數據
                // ...
                this.data = data;
                this.showData();
            }
        },
        onLoad() {
            this.getData();
        }
    };
</script>

在這個例子中，我們使用v-if指令來控制頁面是否顯示。當loading為false時，顯示數據加載成功後的頁面內容；否則則不顯示任何內容，只有等到數據加載完成後，才顯示數據加載成功後的頁面內容。在數據加載完成後，我們調用showData函數，將loading置為false，以便頁面的顯示。

九、uniapp更改數據後不渲染頁面

在uniapp開發中，有時候我們會發現更改數據後，頁面並沒有顯示相應的更

原創文章，作者：BFIQ，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/138504.html