zoukankan      html  css  js  c++  java
  • vue实现文字上下滚动

    实现文字的上下滚动使用positon的relative的top属性,通过动态改变top来实现相关内容的更换,通过transion来实现相关的动画效果,

    相关的dom内容

    <template>
        <div class="index">
          <div class="scroll">
            <ul :style="{top}" :class="{transition:index!=0}">
              <li v-for="(item,index) in list">
                {{"第"+item+"条数据"}}
              </li>
              <li>
                {{"第"+list[0]+"条数据"}}
              </li>
            </ul>
          </div>
          <router-link to="/">hello</router-link>
        </div>
      </template>
    

    相关css内容

    img{ 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-right: 20px}
    ul{position: relative;}
    li{overflow: hidden;white-space: nowrap;  text-overflow:ellipsis; 80%;height: 60px;line-height: 60px;text-align: left;margin: 0;font-size: 14px}
    .scroll{height:60px;overflow: hidden;font-size: 0px;  position: relative;}
    .transition{transition: top 0.5s}
    

    相关script内容

    <script>
        export default {
          name: 'HelloWorld',
          data() {
            return {
              list: [
                "一","二","三","四","五","六","七","八","九","十"
              ],
              top: "",
              index: 0,
              p:""
            }
          },
          mounted() {
            this.goScroll()
          },
          methods: {
            goScroll() {
              var _this = this;
              this.p = setInterval(() => {
                console.log(22)
                _this.top = -60 * _this.index + 'px';
                if (_this.index >= this.list.length + 1) {
                  _this.index = 0;
                  _this.top = -0 + 'px';
                  clearInterval(_this.p);
                  _this.continueScroll()
                } else {
                  _this.index++;
                }
              }, 1000)
            }, 
            continueScroll(){
              var _this=this;
            setTimeout(() => {
              _this.index=1;
            _this.top = -60 * this.index+ 'px';
            _this.index++
             this.goScroll()
            },100);
          }
          },
          destroyed(){
            clearInterval( this.p );
          }
        }
      
      </script>
      
    
  • 相关阅读:
    递归与尾递归(C语言)
    超酷算法:Levenshtein自动机
    编程面试的10大算法概念汇总
    C 语言中的指针和内存泄漏
    计算机实际上是如何工作的
    超酷算法:同型哈希
    4个Linux服务器监控工具
    2015-3-23
    2015-3-20
    2015-3-19
  • 原文地址:https://www.cnblogs.com/Sarah119/p/9394927.html
Copyright © 2011-2022 走看看