自定义组件中的setData没有更新视图
发布于 6 年前 作者 weilei 8571 次浏览 来自 问答

自定义组件的setData没有更新视图：

<view class="w-slide-menu">
  <!--主容器-->
  <view class="w-slide-menu-content"
    bindtouchstart="touchstartHandler">
    {{isMoving}}
  </view>
</view>
// frame/slideMenu/slideMenu.js
Component({
  data: {
    isMoving: false
  },
  methods: {
    touchstartHandler (e) {
      this.setData({
        isMoving: true
      })
      console.log(this.data.isMoving)
    }
  }
})

当点击w-slide-menu-content的时候console.log打印的值为true，但是视图中的显示还是false，请问这个是什么原因导致的

4 回复

因为setData是一个异步的方法，console.log()输出的时候可能还没有执行完毕，可以尝试一下下面的写法

// frame/slideMenu/slideMenu.js
Component({
  data: {
    isMoving: false
  },
  methods: {
    touchstartHandler (e) {
      this.setData({
        isMoving: true

      },function(){

        console.log(this.data.isMoving)

      });
    }
  }
})

我也很奇怪，我在手机上体验版本不会有这个问题，就是我这个开发者工具有这个问题，我是懵逼的

不要太依赖编辑器，编辑器和真机的体现，有时会出现差异性，以真机为主。

测试没有复现，很奇怪你的情况

回到顶部