位置:电子教程 > Uni-app入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
uni-app概要
通过 HBuilderX 可视化界面
通过 HBuilderX发布为小程序
通过vue-cli命令行运行uni app项目
框架简介
使用Vue.js注意事项
uni-app 常见问题
当前阅读教程:Uni-app入门教程 > uni-app 常见问题
阅读(22555525)      收藏       赞(5685)      分享
上一篇: uni-app Vue 组件 下一篇: 暂无

1. 如何获取上个页面传递的数据

onLoad 里得到,onLoad 的参数是其他页面打开当前页面所传递的数据。

 

2. 如何设置全局的数据和全局的方法

uni-app 内置了 vuex ,在app里的使用,可参考hello-uniapp store/index.js

//store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

    state: {...},

    mutations: {...},

    actions: {...}

})

 

export default store

 

//main.js

...

import store from './store'

Vue.prototype.$store = store

const app = new Vue({

    store,...

})

...

 

//test.vue 使用时:

import {mapState,mapMutations} from 'vuex'

3. 如何捕获 app onError

由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:

export default {

   // 只有 app 才会有 onLaunch 的生命周期

   onLaunch () {

       // ...

   },

 

   // 捕获 app error

   onError (err) {

       console.log(err)

   }

}

4. 组件属性设置不生效解决办法

当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。

解决办法有两种(以scroll-view组件为例):

l  监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">

export default {

    data() {

        return {

            scrollTop: 0,

            old: {

                scrollTop: 0

            }

        }

    },

    methods: {

        scroll: function(e) {

            this.old.scrollTop = e.detail.scrollTop

        },

        goTop: function(e) {

            this.scrollTop = this.old.scrollTop

            this.$nextTick(function() {

                this.scrollTop = 0

            });

        }

    }

}

监听scroll事件,获取组件内部变化的值,实时更新其绑定值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">

 

export default {

    data() {

        return {

            scrollTop: 0,

        }

    },

    methods: {

        scroll: function(e) {

            this.scrollTop = e.detail.scrollTop

        },

        goTop: function(e) {

            this.scrollTop = 0

        }

    }

}

第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。


上一篇: uni-app Vue 组件 下一篇: 暂无
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)