小工具集合

文章介绍了如何使用JavaScript监听滚动事件实现元素定位,结合Vue实现平滑的锚点跳转效果。同时,提供了三种不同的方法检测当前页面是否在微信浏览器中打开,以及一个复制文本到剪贴板的功能,结合了通知提示。
摘要由CSDN通过智能技术生成

滚动定位

document.getElementById('innner').addEventListener('scroll', function ($event) {
            let top = $event.target.scrollTop
            let scrollPanel = document.getElementsByClassName('scroll-panel')
            let height = 0
            for (let i = 0; i < scrollPanel.length; i++) {
                height += scrollPanel[i].offsetHeight + 30
                if (height >= top) {
                    _that.activeIndex = i
                    break
                }
            }
        })

vue 锚点效果

goAnchor(selector, i) {
	this.activeIndex = i
	this.$el.querySelector(selector).scrollIntoView({
		behavior: 'smooth', // 平滑过渡
		block: 'start', // 上边框与视窗顶部平齐。默认值
	})
}		

如何判断当前页面是否在微信浏览器中打开

//方法一:
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (isWeixin) {
    return true;
}else{
    return false;
}

//方法二:
function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

//方法三:
var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
if(is_weixin){
    $(function(){
        return true;
    });
}else{
    $(function(){
        return false;
    });
}

复制文本

copyAddress(url) {
	let oInput = document.createElement('input')
	oInput.value = url
	document.body.appendChild(oInput)
	oInput.select()

	document.execCommand('Copy')
	oInput.remove()

	this.$notify({
		title: '复制成功',
		message: '新窗口查看文档文件',
		type: 'info',
	})
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值