vue-seamless-scroll的使用以及实例

vue-seamless-scroll介绍

vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

安装

***Npm ***

npm install vue-seamless-scroll --save

引入组件

import vueSeamlessScroll from 'vue-seamless-scroll'
 components: {

    vueSeamlessScroll
  },

配置参数

// 监听属性 类似于data概念
        computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 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)
                }
            }
 
        },　　

完整实例代码

<vue-seamless-scroll v-if="tempArray.length>=1" :data="tempArray" class="seamless-warp" :class-option="defaultOption"  >
            <ul class="ul-scoll">
                <li v-for="(item, index) in tempArray" :key='index'>
                  <div class="item" >
                   <div :class="((item.Isnormal=='断联')||(item.Isnormal=='异常'))?'top top-1':'top top-2'"><span>{{index+1}}</span> </div>
                    <div class="pro-name"  :data-id="index" :data-index="item.C_Code" :data-model="item">{{item.C_Code}}</div>
                    <div class="pro-name">{{item.C_TaskNum}}</div>
                    <div class="num">{{item.C_Location}}</div>
                    <div class="num">{{item.Isnormal}}</div>
                    <div class="num">{{item.C_Status}}</div>
                    <div class="num">{{item.C_IsLock}}</div>
                    <div class="num">{{item.C_Electricity}}</div>
                  </div>
                </li>
            </ul>
        </vue-seamless-scroll>

css 设置

  .seamless-warp{
 
      width: 100%;
      height: 200%;
      overflow: hidden;
      color:rgba(255,255,255, 1);
      position: relative;
      overflow-y: auto;


      span{
        display:block;
        line-height: 3;
        font-size: 20px;

      }
    }
       .ul-scoll{
            li{
                margin: 10px;
                padding: 10px;
                background: rgba(186, 218, 207, 0.4);
            }
        }

其他实例

<template>
    <div class="" style="padding: 50px;">
        <div class="page-example3" style="">
            <vue-seamless-scroll :data="listData" :class-option="defaultOption" >
                <ul class="ul-scoll">
                    <li v-for="(item, index) in listData" :key='index'>
                        <span class="title">{{item.title}}：</span><span class="date">{{item.time}}</span>
                    </li>
                </ul>
            </vue-seamless-scroll>
        </div>
    </div>
</template>
 
<script>
    import vueSeamlessScroll from 'vue-seamless-scroll'
    export default {
        name: 'Example3',
        components: {
            vueSeamlessScroll
        },
        data() {
            // 这里存放数据
            return {
                listData: []
            }
        },
        // 监听属性 类似于data概念
        computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 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)
                }
            }
 
        },
        // 方法集合
        methods: {},
        // 监控data中的数据变化
        watch: {},
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
 
        },
        // 生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            for(let i = 0 ; i < 15 ; i++){
                let j = {
                    title:'无缝滚动第几条啊啊啊-'+i,
                    time: '2020-04-10'
                }
                this.listData.push(j)
            }
        }
    }
</script>
 
<style scoped lang="scss">
    //@import url(); 引入公共css类
    .page-example3{
        width: 400px;
        height: 200px;
        overflow: hidden;
        border: 1px solid #283dff;
        .ul-scoll{
            li{
                margin: 6px;
                padding: 5px;
                background: rgba(198, 142, 226, 0.4);
            }
        }
    }
</style>　　

实现点击无缝滚动

 <div class="data-right-item right-3" @click="handleClick($event)">
             <el-select v-model="devicevalue" placeholder="请选择"  @change="DeviceTypeChange" style="width:30%">
                <el-option v-for="(item,idx) in DeviceOptions"  :key="idx" :label="item.lay" :value="item.value"  ></el-option>
              </el-select>

              <div style="top:-10px">

          <div class="item" >
              <div class="top">序号</div>
              <div class="pro-name">设备号</div>
              <div class="pro-name">任务号</div>

              <div class="num">位置</div>
               <div class="num">异常</div>
              <div class="num">状态</div>
              <div class="num">锁定</div>
              <div class="num">电量</div>
          </div>





            <vue-seamless-scroll v-if="tempArray.length>=1" :data="tempArray" class="seamless-warp" :class-option="defaultOption"  >
                <ul class="ul-scoll">
                    <li v-for="(item, index) in tempArray" :key='index'>
                      <div class="item" >
                       <div :class="((item.Isnormal=='断联')||(item.Isnormal=='异常'))?'top top-1':'top top-2'"><span>{{index+1}}</span> </div>
                        <div class="pro-name"  :data-id="index" :data-index="item.C_Code" >{{item.C_Code}}</div>
                        <div class="pro-name">{{item.C_TaskNum}}</div>
                        <div class="num">{{item.C_Location}}</div>
                        <div class="num">{{item.Isnormal}}</div>
                        <div class="num">{{item.C_Status}}</div>
                        <div class="num">{{item.C_IsLock}}</div>
                        <div class="num">{{item.C_Electricity}}</div>
                      </div>
                    </li>
                </ul>
            </vue-seamless-scroll>
         </div>

@click=“handleClick($event)”
:data-id=“index” :data-index=“item.C_Code” 自定义要传参的内容文章来源地址https://www.toymoban.com/news/detail-576341.html

   methods: {

 handleClick(event) {
      console.log(event)
      console.log(event.target)
      
      
      let id= event.target.dataset.id //自定义的内容必须用dataset
      let staffName= event.target.dataset.index


      let s=0;
      let e=0;
      this.tempTipArray.map((item, i) => {
        
        item.map((val, idx) => {
           if (val.field == "C_Code"&&val.value==staffName) {
                e=idx;
                s=i;
              
              }
        })
      })
      let obj=[];
      let str="";
      for(let i=0;i<this.tempTipArray[s].length;i++)
      {
        let name=this.tempTipArray[s][i].name;
        let value=this.tempTipArray[s][i].value;
         str+=((i+1)+"-"+name+":"+value+"\t\r");        
      }
        this.$notify({
        title: '查询结果',
        message: '返回的对象：\n' + str,
        type: 'success'
      });
      
    
      // this.staffInfo.staffId = event.target.id
      // this.staffInfo.staffName = event.target.name
      // this.staffInfo.deptName = event.target.dataset.dept

    }
}

到了这里，关于vue-seamless-scroll的使用以及实例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！