vue-seamless-scroll 不自动滚动解决方法
项目场景:在子页面使用vue-seamless-scroll问题描述:没有自动滚动,鼠标移上去,才触发自动滚动原因分析:数据需要在页面挂载好就赋值,否则页面在加载完成后,数据呜发自动滚动解决方案:在mounted或data种给list赋值,下面介绍一下vue-seamless-scroll 的使用方法1.安装vue-seamless-scrollnpm install vue-seamless-s
·
项目场景:
在子页面使用vue-seamless-scroll
问题描述:
没有自动滚动,鼠标移上去,才触发自动滚动
原因分析:
数据需要在页面挂载好就赋值,否则页面在加载完成后,数据无法自动滚动
解决方案:
在mounted或data中给list赋值,下面介绍一下vue-seamless-scroll 的使用方法
1.安装vue-seamless-scroll
npm install vue-seamless-scroll --save
2.引入主键
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll
},
3.html代码
<div style="height: 220px;overflow: hidden">
<vue-seamless-scroll :data="tableData" :class-option="defaultOption" >
<ul class="ul-scoll">
<li v-for="(item, index) in list" :key='index'>
<div style="width: 80px;float:left;">{{item.code}}</div>
<div style="width: 80px;float:left;">{{item.name}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
4.滚动动画配置
// 监听属性 类似于data概念
computed: {
defaultOption () {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: this.list.length, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
5.数据赋值(很重要)
mounted() {
// 加载数据表格
this.loadList();
},
methods: {
loadList(){
let list = [
{
code:'001',
name:'张一',
},
{
code:'002',
name:'张二',
},
{
code:'003',
name:'张三',
},
{
code:'004',
name:'张四',
},
{
code:'005',
name:'张五',
},
]
for(let a = 0 ;a <10;a++){
for(let i = 0 ; i < list.length ; i++){
let j = {
carNum:list[i].carNum,
state: list[i].state,
type:list[i].type,
time:utilDate.dateFtt(new Date())
};
this.list.push(j)
}
}
}
}
6.运行效果
更多推荐
已为社区贡献1条内容
所有评论(0)