vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

需求:使用vue-seamless-scroll插件实现列表无缝滚动,也可以添加相应的点击跳转,点击事件会存在点击失效的问题。支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换。

效果图:

基于vue的无缝滚动组件

注意:需要给父容器一个height:data='Array'overfolw:hidden;左右滚动需要给ul容器一个初始化 css width

参考配置:

向下滚动 direction:0

向下滚动 direction:1

向左滚动 direction:2

向右滚动 direction:3

鼠标悬停关闭 hoverStop:false

单行停顿 singleHeight:26

单行停顿时间 singleHeight:26 waitTime:2500

1、安装

npm install vue-seamless-scroll --save

2、引入使用

局部 页面使用:

import vueSeamlessScroll from "vue-seamless-scroll";
 components: {
    vueSeamlessScroll,
  },
 data(){
     return {
         bbsData:[]
    }
},
computed: {
    bbsOption () {
        return {
            step: 0.2, // 数值越大速度滚动越快
            limitMoveNum: 3, // 开始无缝滚动的数据量 this.bbsData.length
            hoverStop: false, // 是否开启鼠标悬停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)
        }
    }
}

全局main.js引入:

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

主要代码:

bbsData是接口获取的数据绑定,根据自己绑定定义。

<div class="three-info mt40 bbsInfo" v-if="bbsData.length>0" @click.stop="handleBBs($event)">
            <vue-seamless-scroll :data="bbsData" :class-option="bbsOption" >
                <ul class="ul-scoll">
                    <li v-for="item in bbsData" :key='item.topicId' class="info-item flex align-items">
                        <div class=" fontSize20 info-tag mr10 bbs-tag">论坛</div>
                        <div class=" fontSize26 color3 van-ellipsis" style="flex:1" :data-id="item.topicId">{{item.topicTitle}}</div>
                    </li>
                </ul>
            </vue-seamless-scroll>
</div>
.three-info{
  padding:0 20px 20px;
  border-radius: 10px;
}

.info-item{
  padding-bottom:20px;
  padding-top:20px;
  border-bottom:1px solid #F1F6F8;
}

.info-item .info-tag{
  width: 62px;
  padding:6px 10px;
  background: #3E91FF;
  color:#fff;
  text-align: center;
  border-radius: 6px;
}
.bbsInfo{
  background:#FEFBE8;
  height:264px;
  overflow: hidden;
}
.info-item .bbs-tag{
  background:#FAAF3D;
}

到此这篇关于vue中使用vue-seamless-scroll插件无缝滚动的文章就介绍到这了,更多相关vue无缝滚动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue实现消息的无缝滚动效果的示例代码

    朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题 项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法 第一步在模板中 使用v-for方法循环出消息列表 <template> <div id="box"> <ul id="con1" ref="con1" :class="

  • vue实现列表无缝滚动效果

    本文实例为大家分享了vue实现列表无缝滚动效果的具体代码,供大家参考,具体内容如下 1.安装 npm install vue-seamless-scroll --save 2.在需要使用的组件中引入进行配置 import vueSeamlessScroll from "vue-seamless-scroll"; 在components中注入 components: { vueSeamlessScroll }, 3.使用 <template>   <div class=

  • vue实现消息向上无缝滚动效果

    本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下 代码: <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">   <li v-for="item in noticeList">     ...   </li> <

  • vue实现消息无缝滚动效果

    本文实例为大家分享了vue实现消息无缝滚动效果的具体代码,供大家参考,具体内容如下 JS export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军"}, {name:"王勤"} ] } }, created(){ setInterval(this.scroll,1000) }, methods: { scroll(){ this.animate

  • vue3实现CSS无限无缝滚动效果

    本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下 template 双层div嵌套,进行隐藏滚动显示 <div class="list-container"> <div class="marquee" id="carList"> <template v-for="(item, index) in dataMap.list" :key="index

  • 基于vue.js无缝滚动效果

    一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(

  • 基于vue-seamless-scroll实现无缝滚动效果

    vue中,基于vue-seamless-scroll无缝滚动,供大家参考,具体内容如下 1.安装vue-seamless-scroll npm install vue-seamless-scroll --save 2.引入组件 全局引入在main.js中添加 import scroll from 'vue-seamless-scroll' Vue.use(scroll) 组件局部引入 <vue-seamless-scroll></vue-seamless-scroll> impor

  • vue实现简单无缝滚动效果

    本文实例为大家分享了vue实现简单无缝滚动的具体代码,供大家参考,具体内容如下 效果 实现思路 在vue中如何复制一份列表出来呢且不能丢失绑定的事件,很简单使用slot插槽,使用两个插槽我们就拥有了两个列表 <div class="listScroll" ref="box">     <slot></slot>     <slot></slot> </div> 组件完整代码 <templa

  • vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

    需求:使用vue-seamless-scroll插件实现列表无缝滚动,也可以添加相应的点击跳转,点击事件会存在点击失效的问题.支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换. 效果图: 基于vue的无缝滚动组件 注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 参考配置: 向下滚动 direction:0 向下滚动 direction:1 向左滚动 direction:2 向右滚

  • vue中引用swiper轮播插件的教程详解

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件:  npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

  • Vue中通过Vue.extend动态创建实例的方法

    在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = "show"来控制它的显示隐藏.如下所示: <div> <button @click = "show = !show">弹出</button> <span v-if = "show">这是一条通过按钮控制显示隐藏的信息</span>

  • 在vue中使用echarts实现飞机航线水滴图词云图效果

    目录 vue中引入echarts 飞机航线 html css 准备数据 处理飞行数据获得起点和终点坐标起点和终点 配置地图 配置折线line和散点 使用 水滴图 配置 词云图 配置 vue中引入echarts npm install echarts 在main.js中引用并挂载到vue上便于使用 import * as echarts from 'echarts' Vue.prototype.$echarts =echarts 飞机航线 html <template> <div clas

  • vue实现列表无缝滚动

    本文实例为大家分享了vue实现列表无缝滚动的具体代码,供大家参考,具体内容如下 HTML部分代码 <template> <div id="box" class="wrapper"> <div class="contain" id="con1" ref="con1" :class="{anim:animate==true}"> <List v-fo

  • Vue中的.vue文件的使用方式

    目录 定义.vue文件 引用.vue文件 使用render函数 什么是.vue文件,它的作用是什么 需要安装vue-loader npm i vue-loader vue-template-complier -D 然后在配置文件中新增匹配规则 {test:/\.vue$/,use:'vue-loader'} 定义.vue文件 <template> <!--这里定义html模板--> </template> <script> //这里定义js //在这里导入文

随机推荐