uni-app开发踩坑之路之this指向问题

问题的发生

今天调试开发uniapp小程序时出现了一个问题，即 methods下的 pullDown 方法和 pullUp方法无法调用同为methods下的方法loadData，编译至小程序的console控制台报错 TypeError:this.loadData is not a function ，输出结果如下:

报错截图

源代码是这样的:

布局代码

源代码

同为methods {}下的方法,使用this去调用竟然找不到方法？丈二和尚摸不着头脑，我也是一脸懵逼,完全搞不懂是为什么。
而且，在开发的时候， H5上是很正常的，可是运行到小程序上就出现这种问题。

接下来，我查找了几个uni-app的项目，发现他们项目也都可以通过this.function()的形式进行方法调用没有问题, 初步判断，排除自身的语法或写法问题。

由于我的代码在onLoad中也执行了this.loadData()方法，而在onLoad方法中调用成功，methods中却调用失败，提示方法不存在，那么问题可能就出现在了这个this的指向上。

onLoad(options) {
        this.loadData();
}

onLoad执行的方法可以正确加载数据

通过对this，this.loadData进行日志打印，发现this的实例中不存在当前methods下已定义的方法：

打印日志

打印结果

vue实例

问题的解决

既然知道在onLoad对象下this是对的，那就用一个全局变量在onLoad中初始化保存一下这个this，然后在pullUp方法中使用这个全局变量进行调用。

在script开头, export default{} 代码块之前,初始化一个变量

//<script>
let that = null;

//export default {

在onLoad中进行初始化

onload(){
        that=this;
        this.loadData();
}

修改pullUp方法, 将this修改为that

pullUp (vm) {
        that.page++;
        that.loadData();
}

最后， pullUp方法调用this.onLoad();终于正常执行了。

onLoad执行成功后的输出

后记

我在pullUp(vm)中对 that， this， vm 三个实例进行了打印，通过_uid确认这个方法里的this 和 that的指向确实不同：

pullUp (vm) {
    console.log('that', that);
    console.log('vm', vm);
    console.log('this', this);
    that.page++;
    that.loadData();
}

that， this， vm

vm好理解，其实这个vm就是刷新加载的这个控件，而这个that则是当前页面的vue实例，至于这个this，找了一圈，指向的是什么，还是不得而知[摊手/皱眉]。

出现这个问题，或许是只有用到这个uni-app 的s-pull-scroll插件才会用到的吧。由于我开始做uni-app没多久，vue 才刚刚入门，刚遇到这个问题时，一头雾水，人都要裂开了。经过一上午的处理，终于还是发现了问题的所在并解决掉了这个问题。记录在博客中，一方面方便遇到相同问题的人能够快速找到解决办法，另一方面，也是对自己所遇到的问题的发生，思考，解决做一个记录，进行经验的积累。

附件

下拉刷新，上拉加载 s-pull-scroll 插件地址

最后编辑于：2020.05.19 16:22:20