vue-seamless-scroll滚动插件的使用
一、安装npm install vue-seamless-scroll –save二、在main.ts中全局挂载import vueSeamlessScroll from 'vue-seamless-scroll'Vue.use(vueSeamlessScroll)三、在要使用该插件的子组件中引入import vueSeamlessScroll from "vue-seamless-scroll"
一、安装
npm install vue-seamless-scroll –save
二、在main.ts中全局挂载
import vueSeamlessScroll from 'vue-seamless-scroll'
Vue.use(vueSeamlessScroll)
三、在要使用该插件的子组件中引入
import vueSeamlessScroll from "vue-seamless-scroll";
@Component({
components: {
vueSeamlessScroll,
},
})
若from后的文件名称爆红显示"Could not find a declaration file for module 'vue-seamless-scroll'.,并且node-modules文件中存在vue-seamless-scroll文件夹,这是因为vue-seamless-scroll是js文件而不是ts文件。
先执行
npm install @types/vue-seamless-scroll
若npm报错,执行失败,则在src文件中找到type.d.ts文件,进行声明
declare module 'vue-seamless-scroll';
之后就不会再有爆红的情况了
四、使用vue-seamless-scroll
<template>
<vue-seamless-scroll :data="dataList" :class-option="defaultOption">
<ul>
<li
v-for="(item, index) in dataList"
:key="'list-' + index"
@click="clickItem(item.id)"
>
<span class="title">{{ item.title }}</span>
<span v-if="type == 'message_time'" class="titleRightTime">{{
item.time
}}</span>
<span
v-if="type == 'message_number'"
class="titleRightNumber"
>{{ item.number }}</span
>
</li>
</ul>
</vue-seamless-scroll>
</template>
主要是通过vue-seamless-scroll将要滚动的列表包裹起来
注意:一定要绑定:data属性,属性中为渲染列表的数据,否则无法实现滚动效果。
class-option属性定义滚定的样式
五、defaultOption配置
private defaultOption = {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
openTouch: false, //移动端开启touch滑动
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
// limitMoveNum: 160, //这里的limitMoveNum指的是修改后的参数,是容器的高度
};
相关的配置参数介绍如下
key | description | default | val |
---|---|---|---|
step | 数值越大速度滚动越快 | 1 | Number |
limitMoveNum | 开启无缝滚动的数据量 | 5 | Number |
hoverStop | 是否启用鼠标hover控制 | true | Boolean |
direction | 方向 0 往下 1 往上 2向左 3向右 | 1 | Number |
openTouch | 移动端开启touch滑动 | true | Boolean |
singleHeight | 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 | 0 | Number |
singleWidth | 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 | 0 | Number |
waitTime | 单步停止等待时间(默认值1000ms) | 1000 | Number |
switchOffset | 左右切换按钮距离左右边界的边距(px) | 30 | Number |
autoPlay | 是否自动播放使用switch切换时候需要置为false | true | Boolean |
switchSingleStep | 手动单步切换step值(px) | 134 | Number |
switchDelay | 单步切换的动画时间(ms) | 400 | Number |
switchDisabledClass | 不可以点击状态的switch按钮父元素的类名 | disabled | String |
isSingleRemUnit | singleHeight and singleWidth是否开启rem度量 | false | Boolean |
六、踩掉的第一个坑
问题描述:
数据量少的时候,尽管设置了limitMoveNum为当前数据量,但是页面进去不滚动。
问题分析:
这是因为给vue-seamless-scroll绑定的数据问题。开始我测试过将滚动的数据在子组件写死,那么滚动是正常的,但这里的dataList是从父组件请求后台数据再返回给子组件。在父组件中得到后台数据,再push进返回的dataList数组里面,如下:
object.forEach((val: any) => {
this.dataList.push({
id: val.attrValueId,
title: val.attrValueName,
number: val.total,
});
});
后来发现vue-seamless-scroll绑定的数据不能做任何处理,也就是不能是push进去的,应该直接给赋值。
问题解决:
定义一个数组来暂存得到的数据,再一次性给dataList赋值。
const temp: any = [];
object.forEach((val: any) => {
temp.push({
id: val.attrValueId,
title: val.attrValueName,
number: val.total,
});
});
this.dataList = temp;
如此,数据就能正常滚动了。
七、踩掉的第二个坑
问题描述:
数据量多的时候手动向下翻,翻到没有数据的时候手松,数据开始滚动至消失就不回来了。
问题分析:
没有给vue-seamless-scroll所在的盒子设置高度。
问题解决:
写一个监听外层盒子的方法,根据盒子的高度来设置vue-seamless-scroll的高度。
<vue-seamless-scroll :data="dataList" :class-option="defaultOption" :style="{ height: ulHeight, overflow: 'hidden' }">
<div class="scroll">
<ul ref="numberUl">
<li
v-for="(item, index) in dataList"
:key="'list-' + index"
:data-itemid="item.id"
>
<span :data-itemid="item.id" class="title">{{ item.title }}</span>
<span v-if="type == 'message_time'" class="titleRightTime">{{
item.time
}}</span>
<span
:data-itemid="item.id"
v-if="type == 'message_number'"
class="titleRightNumber"
>{{ item.number }}</span
>
</li>
</ul>
</div>
</vue-seamless-scroll>
@Watch("dataList", { immediate: true, deep: true })
onDataChang() {
this.$nextTick(() => {
const ref = this.$refs["numberUl"] as PdCAny;
if (ref) {
console.log(ref.offsetHeight);
this.ulHeight = ref.offsetHeight + "px";
}
});
}
八、踩掉的第三个坑
问题描述:
给li绑定的点击事件只有部分点击实现了相应的效果,部分没有效果。
问题分析:
这要从这个滚动插件的原理说起:基本原理是把要滚动的部分复制一份,滚动这两部分相同的内容,进而实现无缝连续滚动。
大概是与js的运行机制有关,在页面中事件绑定的时候是先绑定给了第一部分
问题解决:
通过事件委托,在vue-seamless-scroll标签外套一层div,将事件绑定给这个div
就解决了!!
更多推荐
所有评论(0)