此组件在已在vue-seamless-scrool做了详细介绍。主要做一下问题记录:
- 环境配置
cnpm i vue-seamless-scroll --save
//全局配置
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
然后就可以在项目中运用文档介绍的各种案例了。
2. 横向滚动时出现数据不能衔接在一起的问题。
在进行横向滚动的时候,由于数据由后端接口接入,在使用的时候发现上下数据不能衔接在一起,百度之后,发现下面的方法能完美解决掉。
参考文章:无缝滚动插件vue-seamless-scroll插件使用及问题
@mouseover.native="hoverStatus" @mouseout.native="nohoverStatus"
hoverStatus(e) {
let dom = e.target;
let index = dom.getAttribute('data-index')
if (dom.nodeName.toLowerCase() === 'span' && index) {
// 元素布局特殊性,获取hover元素的兄弟设置样式
dom.previousSibling.style.opacity = '0.8'
}
},
nohoverStatus(e) {
let dom = e.target;
let index = dom.getAttribute('data-index')
if (dom.nodeName.toLowerCase() === 'span' && index) {
dom.previousSibling.style.opacity = '0'
}
},