Vue用原生写轮播图，为什么一直没效果！求大神指点是不是哪里写错了！！！！

Question

pic++:只执行一次，打印了1.然后定时器一下子全部执行完了，还有什么要把方法写在mounted里面。而不是在created里面，如果写在created会报错，钩子错误，然后元素获取不到

请输入代码<!--template里面必须要有一个div-->
<template>
  <div>
    <div class="swipe">
      <ul id='s_swipe'>
        <li>
          <a href="javascript:;"><img src="../../static/images/01.jpg"></a>
          <div class='s-text'>
            <a href="javascript:;">bauhaus-archiv</a>
            <a href="javascript:;">bauhaus-archiv</a>
            <a href="javascript:;">bauhaus-archiv</a>
          </div>
        </li>
        <li>
          <a href="javascript:;"><img src="../../static/images/02.jpg"></a>
          <div class='s-text'>
            <a href="javascript:;">bauhaus-archiv</a>
            <a href="javascript:;">bauhaus-archiv</a>
            <a href="javascript:;">bauhaus-archiv</a>
          </div>
        </li>
        <li>
          <a href="javascript:;"><img src="../../static/images/03.jpg"></a>
          <div class='s-text'>
            <a href="javascript:;">bauhaus-archiv</a>
            <a href="javascript:;">bauhaus-archiv</a>
            <a href="javascript:;">bauhaus-archiv</a>
          </div>
        </li>
        <li>
          <a href="javascript:;"><img src="../../static/images/01.jpg"></a>
          <div class='s-text'>
            <a href="javascript:;">bauhaus-archiv</a>
            <a href="javascript:;">bauhaus-archiv</a>
            <a href="javascript:;">bauhaus-archiv</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<!--scoped:样式仅限本newsList页面有效果-->
<style scoped rel="stylesheet/less" lang="less">
  .swipe {
    width: 294px;
    height: 510px;
    background-color: yellow;
    box-sizing: border-box;
    position: relative;
    padding: 10px 10px 0 10px;
    overflow: hidden;
    #s_swipe {
      height: 356px;
      width: 1100px;
      position: absolute;
      > li {
        height: 500px;
        width: 274px;
        float: left;
        position: absolute;
        overflow: hidden;
        > a {
          > img {
            width: 274px;
            height: 356px;
            padding-bottom: 22px;
            border-bottom: 1px solid #000;
          }
        }
        .s-text {
          padding-top: 10px;
          > a {
            display: block;
            font: 600 16px/24px 'Microsoft YaHei';
          }
        }
      }
    }
  }
</style>
<!--写逻辑代码，本页面的-->
<script>
  import {animate} from '../base/animate.js';
  export default{
    data(){
      return {};
    },
    mounted(){
      this.swipe();
    },

    methods: {
      swipe(){
        var s_swipe = document.getElementById('s_swipe');
        var lis = s_swipe.children;
        var time;
        var pic = 0;
        var imgWidth = lis[0].offsetWidth;
        time = setInterval(function () {
          if (pic == lis.length - 1) {
            pic = 0;
            s_swipe.style.left = 0;
          }
          pic++;
          console.log(pic);
          for (var i = 0; i < lis.length; i++) {
            var target = -pic * imgWidth;
            animate(s_swipe, {left: target});
            clearInterval(time);
          }
        }, 1000);
      }

    }
  }
</script>

export function animate(elem, target) {
  var leader,
      step,
      surplus;

  if (elem.time) {
    clearInterval(elem.time);
  }
  elem.time = setInterval(function () {
    //当前盒子距离左边的距离
    leader = elem.offsetLeft;
    step = 10;
    //预定距离小于设定距离
    if (target < leader) {
      step = -step;
    }
    //剩余距离
    surplus = Math.abs(target - leader);
    //判断剩余距离和设定距离
    if (surplus >= Math.abs(step)) {
      leader = leader + step;
      elem.style.left = leader + 'px';
    } else {
      //到达终点清除定时器
      clearInterval(elem.time);
      elem.style.left = target + 'px';
    }
  }, 16);
}

请输入代码

Answer 1

created中只是成了dom字符串并没有挂在到目标元素中,这时候操作dom是找不到的?

mounted中dom字符串已经插入到目标元素中, 可以操作dom

https://cn.vuejs.org/v2/guide...生命周期图示