vue-seamless-scroll踩坑分享
自己在项目中遇到列表内容无缝滚动的需求,在百度后发现很多使用vue-seamless-scroll组件去实现,因此也就开始了我的踩坑之路
安装
npm install vue-seamless-scroll --save
配置
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
调用组件
页面演示地址:
https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
<template>
<vue-seamless-scroll :data="listData" :class-option="optionSingleHeightTime" class="seamless-warp">
<ul class="item">
<li v-for="item in listData">
<span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>
</template>
<style lang="scss" scoped>
.seamless-warp {
height: 229px;
overflow: hidden;
}
</style>
<script>
export default {
data () {
return {
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}]
}
},
computed: {
optionSingleHeightTime () {
return {
step: 0.2,
limitMoveNum: 2,
hoverStop: true,
direction: 0,
openWatch: true,
singleHeight: 0,
singleWidth: 0,
waitTime: 1000
}
}
}
}
</script> }
}
}
</script>
!!!以上就是第一个,官网页面展示数据是写死的,所以我们看到先到页面效果没有问题,但是我们正常项目数据都是从后台请求过来的,通过父传子数据接收,在这里我遇到页面初次渲染,列表不自动滚动以及数据只滚动一次
解决方案如下
watch:{
'dataList':function(val){
this.listData=val
}
},
mounted(){
this.arr.forEach((val,index)=>{
let text={
date:val.date,
title:val.title,
content:val.content
}
this.listData.push(text)
})
}
解决思路主要通过watch实时监听数据,然后vueSeamlessScroll组件初始数据需要在mouted生命周期通过数组遍历在push 进去