最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • vue 实现跑马灯效果(无缝滚动)

    正文概述 掘金(Robin)   2021-07-12   741

    项目上用到一个跑马灯的组件(支持文字、图片的无缝滚动),没有找到开源的合适的组件,索性自己实现一个。

    实现原理:

    用到HTML element 的两个属性:scrollLeft和scrollWidth。

    1. scrollLeft :读取或设置元素滚动条到元素左边的距离。

    2. scrollWidth:只读属性,是对元素内容宽度的一种度量,包括由于overflow溢出而在屏幕上不可见的内容

    简单来说,就是获取滚动元素的scrollWidth,然后不断的设置scrollLeft的值就可以了。

    show you my code:

    ?下面是跑马灯组件:

    <template>
      <div class="show-area" :style="{ width: `${width}px`, height: `${height}px` }">
        <div class="scroll-area">
          <!-- 设置margin,使内容 有从无到有的出现效果 -->
          <div class="slot-container" :style="{ margin: `0 ${width}px` }">
            <slot></slot>
          </div>
        </div>
      </div>
    </template>
    
    <script lang="ts">
    import Vue, { PropType } from 'vue'
    
    export default Vue.extend({
      props: {
        // 自定义跑马灯宽度
        width: {
          type: Number,
          default() {
            return 400
          }
        },
        // 自定义跑马灯高度
        height: {
          type: Number,
          default: 50
        }
      },
      data() {
        return {}
      },
      mounted() {
        // 在mounted阶段,才可以获取真实DOM节点
        const showArea: any = document.querySelector('.show-area')
        //从左到右滚动,首先把滚动条置到元素的最右边
        showArea.scrollLeft = showArea.scrollWidth
        function f() {
          //如果滚动条到了元素的最左边,那么把它再初始化到最右边
          if (showArea.scrollLeft < 3) {
            showArea.scrollLeft = showArea.scrollWidth
          } else {
            //每次滚动条向左移动2,改变speed可以调整滚动速度
            const speed = 2
            showArea.scrollLeft -= speed
          }
          //使用requestAnimationFrame,优化滚动效果
          //requestAnimationFrame使得滚动和机器帧率同步
          requestAnimationFrame(f)
        }
        requestAnimationFrame(f)
      }
    })
    </script>
    
    <style lang="scss" scoped>
    .show-area {
      // height: 50px;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      .scroll-area {
        display: inline-block;
        .slot-container {
          display: inline-block;
        }
      }
    }
    </style>
    

    ?下面是一个demo:

    <template>
      <div class="carousel-c">
        <Carousel>
          <div v-for="item in items" :key="item">
            {{ item }}
          </div>
        </Carousel>
      </div>
    </template>
    
    <script lang="ts">
    import Vue from 'vue'
    import Carousel from '@components/common/carousel/carousel'
    
    export default Vue.extend({
      components: {
        Carousel
      },
      data() {
        return {
          items: ['文字1  ', '文字2  ', '文字3  ', '文字4  ', '文字5  ', '文字6  ']
        }
      }
    })
    </script>
    
    <style scoped lang="scss"></style>
    
    

    起源地下载网 » vue 实现跑马灯效果(无缝滚动)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元