快捷導(dǎo)航

vue中使用vue-seamless-scroll插件實(shí)現(xiàn)列表無縫滾動(dòng)效果

更新時(shí)間：2022年06月01日 14:40:34 作者：船長在船上

這篇文章主要介紹了vue中使用vue-seamless-scroll插件無縫滾動(dòng),支持上下左右無縫滾動(dòng)，單步滾動(dòng)停留時(shí)間，以及水平方向的手動(dòng)切換，需要的朋友可以參考下

需求：使用vue-seamless-scroll插件實(shí)現(xiàn)列表無縫滾動(dòng)，也可以添加相應(yīng)的點(diǎn)擊跳轉(zhuǎn)，點(diǎn)擊事件會存在點(diǎn)擊失效的問題。支持上下左右無縫滾動(dòng)，單步滾動(dòng)停留時(shí)間，以及水平方向的手動(dòng)切換。

效果圖：

基于vue的無縫滾動(dòng)組件

注意：需要給父容器一個(gè)height和:data='Array'和overfolw:hidden;左右滾動(dòng)需要給ul容器一個(gè)初始化 css width。

參考配置：

向下滾動(dòng) direction:0

向下滾動(dòng) direction:1

向左滾動(dòng) direction:2

向右滾動(dòng) direction:3

鼠標(biāo)懸停關(guān)閉 hoverStop:false

單行停頓 singleHeight:26

單行停頓時(shí)間 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, // 數(shù)值越大速度滾動(dòng)越快
            limitMoveNum: 3, // 開始無縫滾動(dòng)的數(shù)據(jù)量 this.bbsData.length
            hoverStop: false, // 是否開啟鼠標(biāo)懸停stop
            direction: 1, // 0向下 1向上 2向左 3向右
            openWatch: true, // 開啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom
            singleHeight: 0, // 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1
            singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3
            waitTime: 1000 // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)
        }
    }
}

全局main.js引入：

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

主要代碼：

bbsData是接口獲取的數(shù)據(jù)綁定，根據(jù)自己綁定定義。

<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;
}

到此這篇關(guān)于vue中使用vue-seamless-scroll插件無縫滾動(dòng)的文章就介紹到這了,更多相關(guān)vue無縫滾動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: