vue

您所在的位置：网站首页 › 表格设置滚动的时候标题不滚动怎么回事 › vue

vue

2023-08-21 08:45| 来源: 网络整理| 查看: 265

项目场景：

在子页面使用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代码

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

【本文地址】

vue

vue

今日新闻

推荐新闻