基于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>
 	import vueSeamlessScroll from 'vue-seamless-scroll'
 	components: {
 	     vueSeamlessScroll
 	},

3、配置参数

 	// 监听属性 类似于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)
 	         }
 	         }
 	 
 	     }, 

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',
 	     data() {
 	         // 这里存放数据
 	         return {
 	         listData: []
 	         }
 	     },
 	     // import引入的组件需要注入到对象中才能使用
 	     components: {
 	         vueSeamlessScroll
 	     },
 	     // 监听属性 类似于data概念
 	     computed: {
 	         defaultOption () {
 	         return {
 	             step: 1, // 数值越大速度滚动越快
 	             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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

PHP Warning: A non-numeric value encountered in /home/ftp/3/3h4z5k529i222/web/wp-content/themes/rk-blogger/common/_wbt_core.php on line 401 PHP Warning: Division by zero in /home/ftp/3/3h4z5k529i222/web/wp-content/themes/rk-blogger/common/_wbt_core.php on line 401

标签

发表评论