最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件。下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者文档

步骤如下

1.  安装:npm install vue-seamless-scroll –save

2.  global install 全局挂载

  1. // **main.js**
  2.  
  3. import Vue from 'vue'
  4.  
  5. import scroll from 'vue-seamless-scroll'
  6.  
  7. Vue.use(scroll)
  8.  
  9. //or you can set componentName default componentName is vue-seamless-scroll
  10.  
  11. Vue.use(scroll,{componentName: 'scroll-seamless'})

3.  单文件 .vue import使用

  1. HTML模板信息:
  2. <vue-seamless-scroll
  3. :data="projectDesList"
  4. :class-option="optionSetting" //参数配置,计算属性
  5. class="seamless-warp"
  6. >
  7. <ul class="item">
  8. <li v-for="(item,key) in projectDesList" :key>
  9. <span class="title" v-text="item.title"></span>
  10. </li>
  11. </ul>
  12. </vue-seamless-scroll>

  13. 脚本信息配置:
  14. <script>
  15.  
  16. import vueSeamless from 'vue-seamless-scroll'
  17. export default {
  18. components: {
  19. vueSeamless
  20. }
  21. data() {
  22. return {
  23. projectDesList: []// 滚动项目信息为数组
  24. }
  25. }
  26. }
  27. 备注:若滚动信息为API后台请求数据,需要在vue 生命周期create 以及mounted中同时通过this.$nextTick请求,目的是保证在dom加载前获取数据再渲染。
  28.  
  29. 例如
  30. created() {
  31. this.$nextTick(() => {
  32. this.getProjectIntr()
  33. })
  34. },
  35. mounted() {
  36. this.$nextTick(() => {
  37. setTimeout(() => {
  38. this.getProjectIntr()//获取数据接口方法
  39. }, 500)
  40. })
  41. }
  42.  
  43. 通过vue计算属性配置滚动信息自定义参数
  44.  
  45. computed: {
  46.  
  47. optionSetting () {
  48.  
  49. return {
  50.  
  51. step: 0.2, // 数值越大速度滚动越快
  52.  
  53. limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
  54.  
  55. hoverStop: true, // 是否开启鼠标悬停stop
  56.  
  57. direction: 0, // 0向下 1向上 2向左 3向右
  58.  
  59. openWatch: true, // 开启数据实时监控刷新dom
  60.  
  61. singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  62.  
  63. singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  64.  
  65. waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
  66.  
  67. }
  68.  
  69. }
  70.  
  71. }
  72. }
  73. </script>

  74. 滚动信息的容器样式高度和overflow 属性为必选项,样式配置信息如下:
  75. <style rel="stylesheet/scss" lang="scss" scoped>
  76.  
  77. .seamless-warp {
  78.  
  79. height: 188px;
  80.  
  81. overflow: hidden;
  82.  
  83. ul {
  84.  
  85. list-style: none;
  86.  
  87. padding: 0;
  88.  
  89. margin: 0 auto;
  90.  
  91. li {
  92.  
  93. height: 30px;
  94.  
  95. line-height: 30px;
  96.  
  97. display: flex;
  98.  
  99. justify-content: space-between;
  100.  
  101. font-size: 15px;
  102. }
  103. }
  104. }
  105.  
  106. </style>

vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结的更多相关文章

  1. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. liMarquee – jQuery无缝滚动插件(制作跑马灯效果)

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  3. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  4. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

  5. vue的无缝滚动插件vue-seamless-scroll的安装与使用

    npm安装地址 https://www.npmjs.com/package/vue-seamless-scroll 命令行执行: npm install vue-seamless-scroll --s ...

  6. vue的无缝滚动插件vue-seamless-scroll的使用

    https://chenxuan0000.github.io/component-document/index_prod.html#/component/seamless-others 在vue环境下 ...

  7. jQuery无缝滚动插件

    插件代码 ;(function ($) { // jQuery marquee 插件 $.fn.marquee = function (options) { // 默认设置 var defaults ...

  8. vue无缝滚动的插件开发填坑分享

    写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...

  9. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. AI:IPPR的数学表示-CNN可视化语义分析

    前言: ANN是个语义黑箱的意思是没有通用明确的函数表示,参数化的模型并不能给出函数的形式,更进而不能表示函数的实际意义. 而CNN在图像处理方面具有天然的理论优势,而Conv层和Polling层,整 ...

  2. trait 和abstract的区别在哪里

    无法在一个class上extend多个abstract class,但是你可以use多个trait abstract class是在类型系统上做文章,trait片段是mixin 类型约束 代码复用 c ...

  3. 验证:java 主线程在子线程结束后才会结束

    package com.idealisan.test; /** * Hello world! * */ public class App { public static void main( Stri ...

  4. lucene7.1.0实现搜索文件内容

    Lucene的使用主要体现在两个步骤: 1 创建索引,通过IndexWriter对不同的文件进行索引的创建,并将其保存在索引相关文件存储的位置中. 2 通过索引查寻关键字相关文档. 首先,我们需要定义 ...

  5. apk下载的网址生成一个二维码

    apk提供二维码扫描下载,其实就是把apk所在的地址生成二维码. 下面提供一个在线二维码生成网址,http://cli.im/text/1833744?iID7V

  6. emmmmmm(官宣?)

    实验室永远不会是学习的唯一地点,不是吗? 总后悔当初退竞赛,现在却还是选择退出,大概是自己真的不适合吧...

  7. while(Thread.activeCount() > 1)

    今天看到深入理解JVM第367页多线程volatile部分照着书本敲着代码发现了一个问题 Thread.activeCount()会一直大于2 public class VolatileTest { ...

  8. ecshop 输出数组

    找到include/cls_template.php文件 找到get_val()函数,可以在大约629行加入 case 'print_r': $p = 'print_r(' . $p . ',true ...

  9. Request中通过文件流获取文件

    第一次写博客,希望能帮到以后接触到这里的同学,废话不多说,面对疾风吧. /** * 获取文件相信信息 * @param request HttpServletRequest实例 * @param im ...

  10. SpringBoot 读取配置文件的值 赋给静态变量

    需求:写了一个工具类,但是工具类中的一些变量需要放到配置文件中,而这个工具类中的变量与方法都是静态的,这个时候我需要一个办法将配置文件中的相关配置读取过来赋值给这些静态变量.找了一些文章,试了一些方法 ...