【Nuxt】Nuxt3中监听resize事件监听窗口变化和滚动等事件

代码如下,记得加判断

const store = useStore()
store.SetIsMobile(window.innerWidth < 768)
// process.client 用于判断是否在客户端渲染
if (process.client) {
  _.throttle(() => {
    window.addEventListener('resize', () => {
      store.SetIsMobile(window.innerWidth < 768)
    })
  }, 100)()
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nuxt3无限滚动是通过使用Vue和Nuxt等技术实现的。 为了实现无限滚动功能,可以使用Vue Infinite Loading插件。 这个插件可以帮助我们在页面滚动时动态加载更多内容。具体实现的细节可以参考官方文档和示例。 [2 例如,可以设置一个滚动容器,当滚动到底部时,通过触发事件加载更多数据。这样可以实现无限滚动效果。同时,使用Nuxt框架可以更方便地管理和组织Vue组件,并提供更好的性能和开发体验。更多关于nuxt3无限滚动的详细信息可以参考相关的文档。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-soundcloud:with使用Vue和Nuxt构建的SoundCloud客户端](https://download.csdn.net/download/weixin_42134097/19063581)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [面向开发人员的最佳 Vue.js 开发工具](https://blog.csdn.net/shaoming314/article/details/124653623)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值