vue小技巧

vue 滚动插件

2019-03-30  本文已影响0人  去年的牛肉

//安装
npm install vue-seamless-scroll --save

//然后在main.js文件里面引入使用:
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

在页面使用参考地址: https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

运用此插件监听按钮点击内容只能通过兄弟元素的滚动距离来监听
写法类似下面的

var a = document.getElementsByClassName('seamless-warp')[0].firstElementChild;
var str = window.getComputedStyle(a).transform;
var index = str.lastIndexOf("-");
var index2 = str.lastIndexOf(")");
str=str.substring(index+1,index2);
str = Number(str);
console.log(str)
if(str==0||str==60||str==120){
this.router.push({ path: 'annunciate', query: { id: 2 } }) }else if(str==20||str==80){ this.router.push({
path: 'annunciate',
query: {
id: 1
}
})
}else{
this.$router.push({
path: 'annunciate',
query: {
id: 0
}
})
}

上一篇下一篇

猜你喜欢

热点阅读