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/n/138504.html