MorJS的下拉刷新事件为什么触发不起来？

开发者培珍提问于 2026-01-30 23:13:28 阅读 17

移动

在用MorJS开发移动端列表页时，按照文档写了下拉刷新的onPullDownRefresh事件，但怎么拉都触发不了，控制台也没报错

代码是这样写的：



  
    
      {{item.text}}
    
  



export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    async onPullDownRefresh() {
      console.log('刷新触发了！') // 没看到这个输出
      await this.fetchData()
      mor.toast('刷新成功')
      this.$refs.refresh.done() // 这里可能有问题？
    }
  }
}

已经试过检查事件名拼写、确认页面滚动高度足够触发，还特意加了this.$refs.refresh.done()，但还是没反应，是不是哪里漏了配置？

移动端框架

我来解答赞 5 收藏

反馈

2 条解答

Des.永穗 Lv1

你这个下拉刷新触发不了，大概率是组件结构或者配置漏了关键点。MorJS 的组件必须配合和一起用，否则事件根本不会注册进去。

下面是能正常触发的结构，拿去改改：

<mor-refresh ref="refresh" @pull-down-refresh="onPullDownRefresh">

  <mor-refresh-header slot="header"></mor-refresh-header>

  <mor-refresh-content>

    <view class="list">

      <view v-for="item in list" :key="item.id">

        {{ item.text }}

      </view>

    </view>

  </mor-refresh-content>

</mor-refresh>

JS部分可以不动，但建议加个防抖或者节流：

export default {

  data() {

    return {

      list: []

    }

  },

  methods: {

    async onPullDownRefresh() {

      console.log('刷新触发了！') // 这里应该能看到了

      await this.fetchData()

      mor.toast('刷新成功')

      this.$refs.refresh.done()

    }

  }

}

另外确认一下页面配置是否允许下拉刷新（有些框架默认关闭）：

{

  "window": {

    "enablePullDownRefresh": true

  }

}

如果还触发不了，加个看看有没有上拉加载的反馈，能帮你反向定位问题。

2026-02-03 15:01

UX俊美 Lv1

这个问题我之前也遇到过，MorJS的下拉刷新有时候确实会踩坑。你现在的代码逻辑是对的，但可能漏了几个关键点。

首先，确保你在 page.json 或者配置里开启了下拉刷新功能：

{

  "enablePullDownRefresh": true

}

这个配置一定要有，不然事件根本不会触发。

其次，this.$refs.refresh.done() 这个用法有点问题。MorJS官方推荐的方式是直接调用 mor.stopPullDownRefresh() 来结束刷新状态。你可以把方法改成这样：

async onPullDownRefresh() {

  console.log('刷新触发了！')

  await this.fetchData()

  mor.toast('刷新成功')

  mor.stopPullDownRefresh() // 换成这种方式

}

最后再检查一下页面结构，外层容器最好直接用 <scroll-view> 包裹，并且设置好 enable-flex 和高度样式。如果这些都调整了还是不行，试试在 onShow 生命周期里手动初始化一次刷新功能。

按这几个步骤改一下，应该就能正常触发了。要是还有问题，可能是框架版本差异导致的，那得具体看文档说明了。

2026-01-31 13:21