当前位置：首页 > 其他问题 > vue 防抖动和节流动态路由传参

vue 防抖动和节流动态路由传参

王丛4年前 (2021-05-26)其他问题966

在第一次触发事件时，不立即执行函数，而是给出一个期限值
这个函数是用来防抖动  fn是你需要传入的方法
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活
function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

动态路由

{
path:'/detail/:id'
component:() => import('views/detail/Detail')
}
this.$router.push('/detail/'+ 传递的参数)

this.$route.params.id 拿到数据

<keep-alive>//用来保存页面状态 
        <router-view ></router-view>
 </keep-alive>
 
  <div ref="ss">内容</div>
  this.$ref.ss.offsetTop
  offsetTop 可以获得 HTML 元素距离上方或外层元素的位置
  
  
  mapGettings  可以将store 里面的getting属性转换成 计算属性
  通过 import {  mapGettings } from 'vuex'
  compterd(){
   ...mapGettings ({
  自定义名称：'方法名'
   })
  }
  
  
  npm   install fastclick   解决移动端浏览器300m延迟问题

扫描二维码推送至手机访问。

分享给朋友：

返回列表

上一篇：关于vue3 学习的整理

下一篇：程序员这几个行为，一看就是缺乏经验！

vue 防抖动和节流动态路由传参

相关文章

程序员这几个行为，一看就是缺乏经验！

[原创]应届生论文查重

[原创]4K电影美剧下载 - HDR杜比视界资源 - 4KHDR世界 - 4KHDR.CN

[原创]电子书分享网站

[原创]跨平台桌面端资源播放器

发表评论

Copyright 一段神奇的代码 .Some Rights Reserved.鲁ICP备18001748号 | 站点地图

Powered By Z-BlogPHP. Theme by TOYEAN.

vue 防抖动和节流 动态路由传参

相关文章

程序员这几个行为，一看就是缺乏经验！

[原创]应届生论文查重

[原创]4K电影美剧下载 - HDR杜比视界资源 - 4KHDR世界 - 4KHDR.CN

[原创]电子书分享网站

[原创]跨平台桌面端资源播放器

发表评论取消回复

Powered By Z-BlogPHP. Theme by TOYEAN.

vue 防抖动和节流动态路由传参

发表评论