vue自动纵向滚屏

最新推荐文章于 2024-05-24 23:35:12 发布

原创最新推荐文章于 2024-05-24 23:35:12 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5

本文介绍了如何在Vue项目中实现自动纵向滚屏的效果。首先展示了实现后的效果，接着讲解了安装相关插件并引入到`main.js`文件中。在Vue代码中，通过默认配置或者自定义`class-option`属性结合`computed`方法，可以轻松实现自动滚屏功能。

先来效果图
在这里插入图片描述
安装插件：

npm install vue-seamless-scroll --save

然后在main.js文件里面引入使用：

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

vue代码如下：

      <vue-seamless-scroll :data="listData" class="seamless-warp">
        <ul class="contList">
          <li  v-for="(item, index) in listData" :key="index" @click="contHandler(item)">
            <img src="./assets/yellow.png" alt="" class="colorImg" v-if="item.state == 0">
            <img src="./assets/blue.png" alt="" class="colorImg" v-if="item.state == 1">
            <img src="./assets/red.png" alt="" class="colorImg" v-if="item.state == 2">
            <p class="contTitle">{{ item.title }}</p>
            <span>{{ item.cont }}</span>
          </li>
        </ul>
      </vue-seamless-scroll>

如此使用默认配置即可完成。

如果需要自定义配置项，需要在标签中加上 :class-option=“optionAptitude”
这样<vue-seamless-scroll :data="listData" class="seamless-warp">，
然后在 computed 使用：

	//滚动显示的配置
    optionAptitude() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 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)
      };
    },