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

就解决了！！